Thumbnail viewer II - initial image load

[Wavefront]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: Is it possible to prime the LoadArea div with an initial image, on say the body onload event?

[magicyte]

Yes.

-magicyte

[Wavefront]

Dear Magicyte. Thank you for your wonderfully brief boolean answer. Would it be possible for you to tell me how to do it?. And I suppose that set's up a yes / no response as well. Am I correct?... and that must be another yes/ no. Please help me!

[rangana]

Just add the image in the area you were referring:

<div id="loadarea" style="width: 600px">
<img src="DEFAULT.jpg" alt="default image">
</div>

<h2 />

<div id="loadarea2" style="width: 550px">
<div id="loadarea" style="width: 600px">
<img src="DEFAULT.jpg" alt="default image">
</div>

Hope that gives you a positive boolean response

[Wavefront]

Rangana

Thanks for that - very simple and effective - but I dont get the caption and I dont get the wipe in effect. I'm looking for a call to thumbnailviewer2 after its init method is run, with the first panel object in hand - that would do the trick. Any ideas?

[rangana]

1. First, give the image you want to see by default a unique identifier. For instance, an id of default:
   

   <a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com" title="This is an example" id="default">

2. Find this in thumbnailviewer2.js and add highglighted:
   

   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
   
   var def=document.getElementById('default'); // ID of the default image
   thumbnailviewer2.loadimage(def);
   }

Hope that helps.