Linked thumbs in Thumbnail Viewer II

[ursut]

Script Title: Thumbnail Viewer II

This script works perfectly as described. I have a small(?) modification request though.

How to give the thubnails a clickable href, ie to another page, while keeping the swap image when onmouseover?

That is:
1. When mouse over a thumb, show "big" image in targetted div (rev='loadarea...), as usual.
2. When thumbnail is KLICKED you will be taken to a defined destination (like when the big image is klicked).

I appreciate your help.
Cheers!

[rangana]

See if removing highlighted on thumbnailviewer2.js helps:

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
}
}

[jscheuer1]

That's only half (if that much) of the battle. I believe there is a better way than messing with the main script.

1. When mouse over a thumb, show "big" image in targetted div (rev='loadarea...), as usual.
2. When thumbnail is KLICKED you will be taken to a defined destination (like when the big image is klicked).

Well, yes - number 1 is no problem - it already does that if you configure it with:

rel="enlargeimage::mouseover"

Now, of course if you were to use:

rel="enlargeimage::click"

number 2 could never work out. So we must assume you are using the mouseover method. Now, where do you want it to go when the thumbnail is clicked? Like do you want it to go to the same place as the enlarged image, or to yet another page?

In any case, we can add this code to the head of the page:

<script type="text/javascript">
;(function(){
var extraClick = function(e){
e = e || window.event;
var t = e.target? e.target : e.srcElement? e.srcElement : null;
if(t)
t = t.rel && /enlargeimage::mouseover/.test(t.rel)? t : t.parentNode? t.parentNode : null;
if(!t) return;
if(t.rel && /enlargeimage::mouseover::.+/.test(t.rel))
window.location.href = t.rel.split('::')[2];
};
if(window.addEventListener)
document.addEventListener('click', extraClick, false);
else if (window.attachEvent)
document.attachEvent('onclick', extraClick);
})();
</script>

Now we can add a link for any thumbnail, ex:

<a href="bulb.gif" rel="enlargeimage::mouseover::http://www.google.com/" rev="loadarea">Thumbnail</a>