View Full Version : Thumbnail Viewer 2 - Loadarea2 + Active Text

Al Fresco
07-18-2007, 03:24 AM
1) Script Title: Thumbnail Viewer 2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Hi. Strange problems.

1.The portrait format pics in this http://petersearle.com/test1/page1.html load correctly (loadarea2) but only sometimes (occasionally they load a new page)

2.The active thumbs (text) in this list http://petersearle.com/test1/list.html will not stay highlighted.
I have had this before with borders and was kindly given some text by John which I have tried to edit (ie. .thumb) but I think I just broke it!

Can anyone please help? Thanks.

Al Fresco
07-18-2007, 12:01 PM
Hi Again,
Still no luck.
I found this on an old posting and thought it may help
onclick="return false;"
for the page loading problem but unfortunately it didn't.
Does anyone have any ideas on this please?

Al Fresco
07-19-2007, 12:14 AM
Hi. Just a note to say that I have simplified this site using just one loadarea
and some compromise.

Still working on how to make text link and activated click thumbnails (as in example 2 here) http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
stay active.

Does anyone know? http://petersearle.com/test1/list.html

Possibly editing this script from "mouseover" to 'Click"
But How? Please help.

Put something like this in the head of the page:

<style type="text/css">
.thumb {
border:4px solid white;
The width of the border is up to you, the color should be the same as the background color behind the thumbnails or a color of your choosing that indicates that a thumbnail is inactive.

Give each thumbnail a class name of thumb:

<a href="photo1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img class="thumb" src="photo1_tbn" width="50" height="50"></a>
Put this script at the end of the page, just before the closing </body> tag:

<script type="text/javascript">
var i=0, t=document.images, hlight=function(e){
var e=e? e : window.event;
var el=e.target? e.target : e.srcElement;
for (i = 0; i < t.length; i++)
el.style.borderColor='navy'; //Edit hightlight color as desired.
for (i = 0; i < t.length; i++)
if ( typeof window.addEventListener != "undefined" )
t[i].addEventListener( "mouseover", hlight, false );
else if ( typeof window.attachEvent != "undefined" )
t[i].attachEvent( "onmouseover", hlight );
else {
if ( t[i].onmouseover != null ) {
var oldOnmouseover = t[i].onmouseover;
t[i].onmouseover = function ( e ) {
oldOnmouseover( e );
t[i].onmouseover = hlight;
- John WWWWWWWWWWWW . . . My other title is: Global Moderator