PDA

View Full Version : Thumbnailviewer2: NEED HELP



webill
05-04-2007, 12:13 PM
1) Script Title:
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/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
05-04-2007, 01:35 PM
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
05-04-2007, 02:16 PM
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
05-04-2007, 02:35 PM
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
05-04-2007, 04:08 PM
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: '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 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
05-04-2007, 05:25 PM
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
05-04-2007, 05:58 PM
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 (http://www.dynamicdrive.com/forums/showpost.php?p=90955&postcount=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
05-04-2007, 06:25 PM
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 :cool:

Happy Webill