Thumbnailviewer2: NEED HELP

[webill]

1) Script Title:
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...thumbnail2.htm"]
3) Describe problem: I hope you can help me.
I am also using the thumbnailviewer2
My problem is to disable the click on the loaded image as it is not hyperlinked
I would like to keep the option
hideimgmouseout: false //
and disable the click on the image, rather then using :true

The second problem is that I do not know where to enter the hyperlink destination address. At this moment when clciked on the loaded image you are taken to a new window with an obvious error message.
Thank you in advance for any help you can offer.
Cheers
webill

[Veronica]

I'm not sure if this is what you're asking. To change the destination for the parger picture, in your LINKS in the body, you would adjust the rev="load area"

If you wanted the picture to link to a page, you would write it as:

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

If you don't want a link, simply write it as

rev="loadarea"

and the script will take care of it not having a link.


If you provide a URL to your page, that would be helpful.

[webill]

Thank you Veronica
Indeed I tried that and it doesn't work (error message of opend page point still at "loadarea" not found)

Also as the loadarea is still under 'a href' - it remains clickable which can confuse the visitor.

[I am working from my PC therefore no url yet]
btw I use an external .js
thank you

webill

[Veronica]

Can't really say without seeing your code. I just tried the script and it works fine in IE and FF. Also, the external js shouldn't make a difference. Try just uploading it as a testsite and I might see what the issue is.

[webill]

Thank you again. I hope you can help answering my 2 questions. Here after the codes
Body code example when clicking to the enlarged image takes you to a loadarea new window page:

<th width="72" height="70" scope="col">
<a href="images/schild/zand (29).jpg" rel="enlargeimage::mouseover" rev="loadarea" title="Tashi">
<img src="images/thumbs/zand (29).jpg" alt="image" name="image" width="72" height="70" border="0" id="image" /></a>
</th>

This is your DD code linked to htm page


var thumbnailviewer2={
enableTitle: true,
enableTransition: true,
hideimgmouseout:false, //Hide enlarged image when mouse moves out of anchor link?


iefilterstring: 'progidXImageTransform.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 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("::")[0] //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=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()
}
},

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<this.targetlinks.length; i++){
this.targetlinks[i].onclick=null
this.targetlinks[i].onmouseover=null
this.targetlinks[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, true)// use true to have image reset when mouse out (also if true opens //thumbnail on another window)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

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 (with true the thumbnails take you to a new window)
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")

[Veronica]

To make the enlarged image NOT be a link, you need to change the line that says

var dest=linkobj.getAttribute("rev").split("::")[0] //Get URL enlarged image should be linked to, if any

to

var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any

[jscheuer1]

To make the enlarged image NOT be a link, you need to change the line that says

var dest=linkobj.getAttribute("rev").split("::")[0] //Get URL enlarged image should be linked to, if any

to

var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any

I think you have that reversed*, but I'm not sure that will help. It is better just not to specify a link in each rev attribute to begin with (your advice from post#2 in this thread).

*Edit: Apology to Veronica:

If you were just saying to put it back the way that it was, you are right, and I missed that. Sorry.

[webill]

Thank you Veronica! - the [1] did the trick for both my problems. Great support you guys!!!

An idea would be to add this comment to that line of code for future beginners like me

Happy Webill