Customising Image Thumbnail Viewer II

[tscd2]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

I am using the ::click implementation of this script; however, I would like to be able to make the image disappear again by clicking a second time on the thumbnail.

I have absolutely no knowledge of JavaScript, could someone show me how to do this?

Thanks,
T

[tscd2]

I've had more of a fiddle, looked up a few tutorials, and came up with this block of code:

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
imageHTML='<a style="cursor: pointer" onclick="showhide('image')"><div id="image" style="display: block">'+imageHTML+'</div></a>' //TSCD2 Vanish image
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()

where the only deviation from the DD Script is the line in red. The showhide function mentioned is included in the page header, and goes like this:

<script language="JavaScript">
// Credit to http://teamtutorials.com/web-develop...ing-javascript
function showhide(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>

My thinking was that this would mean that the image would be a link that would hide the div it's in. Instead, it just wipes the page and only loads the image. I've tried modifying my code in the following ways:
- using 'var imageHTML=' instead of just 'imageHTML='
- changing the order of the div and anchor in the line I added
- including the showhide function on the external .js file

For all I know this is completely the wrong way to do it, though. Please help?

[tscd2]

Figured it guys, thanks for your help though.

I completely got rid of the Image Thumbnail Viewer II script, and replaced it with this in the header:

<script language="JavaScript">
// Credit to http://teamtutorials.com/web-develop...ing-javascript
function showhide(id) {

var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}

// Written by TSCD2
function imageviewer(id) {
var imagepath=document.getElementById(id).src;
var imageHTML='<em style="cursor: pointer"><img id="'+id+'frame" src="'+imagepath+'" style="display:block" onclick="showhide(\''+id+'frame\')" /></em>';
document.getElementById(document.getElementById(id).alt).innerHTML=imageHTML;
}
</script>

Again, thanks. The script was called with:

<img id="godotpic1" src=".../gallery/godot1.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic1')" height="66" />
<img id="godotpic2" src=".../gallery/godot2.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic2')" height="66" />
<img id="godotpic3" src=".../gallery/godot3.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic3')" height="66" />
<img id="godotpic4" src=".../gallery/godot4.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic4')" height="66" />
<img id="godotpic5" src=".../gallery/godot5.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic5')" height="66" />
<br /><br />

<div id="godot2"></div>

Hope this will help anyone else with the same problem.