Image Thumbnail Viewer II - image on page load

[Quix]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

Hello.

Months ago, I started a thread asking how to load an image and its description on page load using the great Image Thumbnail viewer II. Here's the thread in question: http://www.dynamicdrive.com/forums/s...ad.php?t=18292

However, the solution provided in that thread is very useful for a single image gallery or when you do everything manually.
I will have lots of popup image galleries that are managed by a CMS (WordPress). I got it working with NextGEN Gallery plugin, now I just need to make it load the first or a random image from the current gallery automatically.

How can I achieve that? Math.random() function?

Thank you!

[ddadmin]

In such a case, it's more efficient to modify the external .js file directly for this ability. I'll see what I can do later this evening, and post the modified script.

[jscheuer1]

If there is just one gallery per page (just one loadarea):

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
thumbnailviewer2.loadimage(this.targetlinks[Math.floor(Math.random()*this.targetlinks.length)]);

} //END init() function

For multiple loadareas on a page (will also work with only one loadarea):

} //END FOR LOOP
for (var ars=[], t=this.targetlinks, i = t.length-1; i > -1; --i)
if(!thumbnailviewer2[t[i].rev.split('::')[0]+'_ar']){
thumbnailviewer2[t[i].rev.split('::')[0]+'_ar']=[t[i]];
ars[ars.length]=thumbnailviewer2[t[i].rev.split('::')[0]+'_ar'];
}
else
thumbnailviewer2[t[i].rev.split('::')[0]+'_ar'][thumbnailviewer2[t[i].rev.split('::')[0]+'_ar'].length]=t[i];
for (i = ars.length-1; i > -1; --i)
thumbnailviewer2.loadimage(ars[i][Math.floor(Math.random()*ars[i].length)]);
} //END init() function

[ddadmin]

Very nice. I see you also took into account the fact that targetlinks[] contains all the thumbnail links on the page irrespective of which container the enlarged image should load in. This is problematic if there are more than 1 container specified, and was what deferred me to work on this a little later. I'll probably still work on it, but throw in a cross browser fade effect feature to make it an official update.

Thanks for cleaning up after me again.

[Quix]

You guys are really quick!

Thanks to jscheuer1 for providing the code, and to ddadmin, for making it a future official update. This change is very appreciated. Stunning job.

Thank you very much for helping me once again fine people!