Image Thumbnail Viewer II extension...

[pix23]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

Not a problem as such, the script works great, can anyone suggest a way of making the enlarged/full size image on click load another image in its place..... so click thumbnail, loads enlarged image in the holding div, then its also possible to click enlarged image and load another image from the gallery into its place..... and also can the newly loaded image have the same on click function thereby allowing two methods of viewing your gallery?

many thanks

[jscheuer1]

That could be worked out, yes. How do you envision selecting the image that should appear when one clicks on the enlarged image? From what you say, it sounds like it would be another one of the images that could be selected using the thumbnails, but which one? Or, if I have that part wrong, what image?

[pix23]

Hi jscheuer1,

yeah that's exactly what i mean, I was thinking it would probably pass the new image path as a parameter (like the URL gets passed in the current script) when a user clicks the large image. Does this make sense?

cheers

[jscheuer1]

OK, then simply use this updated version of the script:

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: 30/Apr/2008 in http://www.dynamicdrive.com/forums by jscheuer1
// -------------------------------------------------------------------

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!)
enableChaining:true, //Link displayed Larger Image to next image? (Will not be used with a linked larger image)

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

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var next=null;
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
if(this.enableChaining&&showcontainer.getElementsByTagName('a')[0])showcontainer.getElementsByTagName('a')[0].onclick=null;
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>'
else if(this.enableChaining)
for (var i = this.loadchains[linkobj.rev].length-1; i > -1; --i)
if(this.loadchains[linkobj.rev][i]==linkobj){
next=i<this.loadchains[linkobj.rev].length-1? i+1 : 0;
imageHTML='<a href="javascript:next()">'+imageHTML+'</a>';
break;
}
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=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
if(typeof next=='number'){
var c=this.loadchains[linkobj.rev][next], f=function(){c['on'+c.rel.split('::')[1]].apply(c);return false;};
showcontainer.getElementsByTagName('a')[0].onclick=f;
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null
for (var i=0; i<document.links.length; i++){
document.links[i].onclick=null
document.links[i].onmouseover=null
document.links[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
if(this.enableChaining)
this.loadchains=new Object();
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"
if(this.enableChaining){
if(!this.loadchains[pagelinks[i].rev.split('::')[0]])
this.loadchains[pagelinks[i].rev.split('::')[0]]=[];
this.loadchains[pagelinks[i].rev.split('::')[0]].push(pagelinks[i]);
}
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


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

Notes: You need not do anything differently when setting up your page. But be aware that if you use the linking syntax that includes a link for the larger image (from the demo page):

rev="loadarea::http://www.dynamicdrive.com"

it will override this new functionality I've built into the script for that link's larger image. So, just use the simpler:

rev="loadarea"

syntax. Unless you want it to override, like if for the last thumbnail in the group, you might want it to go to another page at that point, you could use the linking syntax for that one thumbnail.

And, you of course cannot use:

hideimgmouseout: true, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

It must be set to false.

Finally, if you want to use this new version of the script without this new feature, just set this new property I created for it:

enableChaining:true, //Link displayed Larger Image to next image? (Will not be used with a linked larger image)

to false.

Don't worry about these last two things unless you want to change them, they are already set correctly in the updated version of the script in this post.

[pix23]

Absolutely astounding John. that works a treat, thank you very much

all the best

[pix23]

Another question, is it possible to have the first large image show by default, and on click go to the next. I was previously just hard-coding that first image into the page in the correct holding div to make it appear which was fine, but obviously to have that initial large image link to the next large image didn't work (i tried using the code on the first image but that messed things up).

Any help is much appreciated

[jscheuer1]

OK, I see what you mean. Do this, assign a unique id to the second link in the group, like:

<a id="theNext" href="some_big2.jpg" rel="enlargeimage::mouseover" 
rev="loadarea"><img src="some_tbn2.jpg" border=0 alt="Thumbnail"></a>

Then in your load area have:

<img style="cursor:pointer;" 
onclick="var b=document.getElementById('theNext');b.onmouseover.apply(b);" 
title="Click for Next Image" src="some_big1.jpg" alt="Larger Image Missing">

Now, if your gallery uses the click method for its thumbnails, the word onmouseover highlighted in the above would have to be onclick.

[pix23]

Excellent John,

thanks for this, it works great

[Bernie Kruger]

Er I have a similar problem to this question. I just need to load two images.

The thumbnail is a swatch resized (by script to 100 x 100) and then I want to merely display it as full size in a <div> @ 200 x 200 and call the big pic which is a 3D rendering of the swatch in use.

Don't have anything published but I do not like the option of a click on next image to show the big pic.

Here is what I tried with the 2010 version

<table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        
       <td valign="top" width="20%">
<a href="Image/Thumb/533AG.jpg"&nbsp; "Image/533AG.jpg" 
rel="enlargeimage" rev="targetdiv:loadarea" 
title="Arctic Granite"><img src="Image/Thumb/533AG.jpg" 
border="0" height="100" width="100"></a><br>
		<br>
        </td>
        <td width="220"><!--webbot bot="HTMLMarkup" startspan -->
<div  class="BodyTextCenter" id="loadarea" style="width:620px;
height:220px; padding:5 display:block; border-width:0pt;">
        <img src="/Image/Thumb/533AG.jpg" />&nbsp;
        <img src"/Image/533AG.jpg" /></div></td>
        <!--webbot bot="HTMLMarkup" endspan i-checksum="11986" --></td>
      </tr>
    </tbody></table>

Just need a way to call two images alongside each other for the red bits.

Must say the new version is way cooler than the old one and the "transition" works in FF.

The two pics:

[jscheuer1]

Either I'm missing something, or you're over thinking this. Just use one image as the thumbnail image img tag's src, the other as the a tag trigger's href:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        
       <td valign="top" width="20%">
<a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg" 
rel="enlargeimage" rev="targetdiv:loadarea" 
title="Arctic Granite"><img src="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg" 
border="0" height="100" width="100"></a><br>
		<br>
        </td>
      </tr>
    </tbody></table>