Preloader in Image Thumbnail Viewer II

[thegreatergood]

1) Script Title: Image Thumbnail Viewer & Image Thumbnail Viewer II

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

3) Describe problem: Does anyone know how to apply the preloader from the first to the second Image Viewer?

Thanks.

[jscheuer1]

Don't you mean the other way around? I ask because that's how you worded it in a seemingly duplicate question that you had tacked on to another thread:

Any thoughts as to how to apply a preloader to (http://www.dynamicdrive.com/dynamici...thumbnail2.htm) thumbnailviewer2.js? As in http://www.dynamicdrive.com/dynamici...thumbnail.htm?

In any case, Thumbnail II is the script that has preloading. It preloads all mouseover images (rel="elargeimage::mouseover") silently in the background onload of the page. If you are using the onclick method, it does not.

But I think you mean that you want Thumbnail II to display a loading image and/or text if the image isn't immediately available. Am I right? If not, just what are you after?

However, since I already worked out what I thought you meant before I realized it was unclear - This can be done with or without overriding the background preloading of rollover triggers (rel="elargeimage::mouseover"). First add:

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImag . . .

Then substitute this function for the existing one:

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=this.defineLoading;
var theimage = new Image();
theimage.onload = function(){
showcontainer.innerHTML=imageHTML
thumbnailviewer2.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
thumbnailviewer2.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is thumbnailviewer2 an IE browser that supports filters?
showcontainer.filters[0].Play()
}
thumbnailviewer2.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is thumbnailviewer2 an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
}
theimage.onerror = function(){alert('Problem Loading Image!');};
theimage.src = imagepath;
},

Finally, if you want to override the existing background preloading for rollover triggers, comment out these lines as shown:

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"+initT . . .

Note: As the loading area for the larger images in Thumbnail II is less structured than in the other script, You may want to define more elaborate HTML code for the defineLoading property.

[thegreatergood]

Sorry this took so long, my computer graphics card fried. But nevertheless, got it back and got this to work today. Thanks John for your help.

You can see it here:
http://studentpages.scad.edu/~gmihal20/gallerytext.html

Looking good. Now there are a couple of things I need help adjusting.

The JavaScript file is here:
http://studentpages.scad.edu/~gmihal...viewer2pre2.js

First, why does the window snap back up to the top image? I tried to change the height of the loading area div, and also I tried applying the background image with CSS instead of actually an image inside the div.

Eventually I want this gallery to function like http://gregmdesign.com is now. Except it is run with CSS styling and the JavaScript is much more powerful and cross-browser versatility. Any further suggestions?

[jscheuer1]

Well the jumpiness of the page is due to the fact that there is no style height to the display divisions (waterarea and inaugurationarea). These should each be set to the height of the largest image that will occupy them plus room for any captions. I think in the current case this would be about 480px for inaugurationarea for example:

#inaugurationarea {
 height: 480px;
}

[thegreatergood]

Yep, excellent. Did anything else catch your eye in the way the code was functioning? Overall, I think it is functioning quite nicely.

In your opinion, would you like to have the images, when clicked restored to the original background image?

Any other code efficiency suggestions?

Regards,
Greg

[jscheuer1]

Well, it's up to you. Definitely an improvement. I don't know what browser(s) you use but I would suggest having at least (assuming you are running Windows) IE 7, Firefox 3, Opera 9 and Safari 3 for Windows. The first section (Water Mailer) appears to have more vertical space than it needs, and in some browsers Inauguration Project 2009 could use a little more to avoid a minor jump at times.

I'm not entirely clear what you mean about:

would you like to have the images, when clicked restored to the original background image?

How exactly would that work - I mean how would you want the user to experience it. Most likely the code for any sort of arrangement along this line can be easily worked out, I'm just having trouble envisioning what you are proposing.