View Full Version : Image Thumbnail Viewer II - image on page load

12-04-2007, 12:57 AM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:


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/showthread.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!

12-04-2007, 01:49 AM
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.

12-04-2007, 05:15 AM
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()
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)
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement

} //END init() function

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

for (var ars=[], t=this.targetlinks, i = t.length-1; i > -1; --i)
for (i = ars.length-1; i > -1; --i)
} //END init() function

12-04-2007, 10:43 AM
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. :)

12-04-2007, 08:30 PM
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!