PDA

View Full Version : Thumbnail viewer II - initial image load



Wavefront
08-30-2008, 12:23 AM
1) Script Title: Image Thumbnail Viewer II

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

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

magicyte
08-30-2008, 01:02 AM
Yes.

-magicyte

Wavefront
08-30-2008, 03:49 AM
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
08-30-2008, 06:06 AM
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 :p

Wavefront
08-30-2008, 06:39 AM
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
08-30-2008, 06:55 AM
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">



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.