Click thumbnail and go to same link as large image.

[madcoversite]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: I scanned these forums for hours and didn't quite come across the answer I'm searching for. I simply want to make the thumbnail clickable and, in particular, take the viewer to the same page that the large image links to. I removed the code from the script as was recommended in a previous post:

pagelinks[i]["onclick"]=function(){ //Cancel default click action return false}

This restored the ability to click the thumbnail, but any effort to put in an onclick to take us to the desired .html file pops up a new window. I don't want to be taken to a new window.

Here's a quick page to illustrate:
http://www.collectmad.com/madcoversi...1968-test.html
Of course clicking the thumbnails puts the large image on its own page.
I want to be taken to the .html page that the large image links to.

Thanks very much.
Doug

[Nile]

Find:

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

And change it to:

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='<a href='"+imagepath+"'><img src="'+imagepath+'" style="border-width: 0" /></a>' //Construct HTML for enlarged image

[madcoversite]

Thanks for the quick response.

I changed the code as you said and it doesn't seem to like that at all.
I'm assuming I needed to restore the code with what I took out from before as I mentioned in the previous post, before making your changes.

Was I supposed to do anything with my page coding to accomodate the .js change?

I've reset everything back to the original coding - thumbnails currently return nothing with a click.

[Nile]

I'm sorry... Undo what I told you to do, in the js file, change:

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

To:

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="'+imageHTML+'">'+imageHTML+'</a>'

[madcoversite]

I get a "> on top of the loaded image and clicking the loaded image takes you away from the site with a 404 error. Also the thumbnails are not clickable. I did everything twice to make sure I hadn't typed in extra characters.

Thanks for your help.
Doug

[Nile]

Lol, ok this one is for real this time:

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="'+iimagepath+'">'+imageHTML+'</a>'

[madcoversite]

Not really there yet.
The loaded image links to itself (not the html page) and the thumbs don't link to anything. We got rid of the "> and at least one of the links goes somewhere, so that's a start. I assume you didn't want the extra "i" in "imagepath" ?

You know, I was thinking (which is a dangerous thing sometimes) that I don't care about the loaded image having the ability to link to the .html page as much as I prefer the thumbnails link to their respective pages. Would that help the situation if the loaded image didn't have to link anywhere?

Thanks for your time.
Doug

[Nile]

What do you mean by that last thing you said? Yes, get rid of the i, my fault.

[madcoversite]

On my page I have these eight thumbnails lined up that need to link to their respective pages. Here's a completely different example page of what I have currently working:
http://www.collectmad.com/madcoversite/thumbs1969.html

All I was saying is that getting the large image is more of a novelty, a novelty I'd like to have people enjoy, but it doesn't have to be clickable to take us to the page. It would be nice to have the thumbnails take us where we want to go themselves and have the large image as a kind of preview, not the focus of the clicking.

[Nile]

Then in here, you'd have to change the highlighted to the correct locations:

TABLE BORDER=0 WIDTH=570> 
 
<TR><TD><TH ALIGN="right">#116<BR>Jan</TD><TD><a href="mad116id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad116.html"> 
<IMG ALT="Mad #116" HEIGHT="58" WIDTH="45" SRC = "thumb116.jpg"></a></TD><TD ROWSPAN=8 VALIGN="top" ALIGN="center"> 
<div id="loadarea" style="width: 300px"><H2>Roll over thumbs<BR> for larger view.</H2></div> 
</TD></TR> 
<TR><TD><TH ALIGN="right">#117<BR>Mar</TD><TD><a href="mad117id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad117.html"> 
<IMG ALT="Mad #117" HEIGHT="58" WIDTH="45" SRC = "thumb117.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#118<BR>Apr</TD><TD><a href="mad118id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad118.html"> 
<IMG ALT="Mad #118" HEIGHT="58" WIDTH="45" SRC = "thumb118.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#119<BR>Jun</TD><TD><a href="mad119id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad119.html"> 
<IMG ALT="Mad #119" HEIGHT="58" WIDTH="45" SRC = "thumb119.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#120<BR>Jul</TD><TD><a href="mad120id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad120.html"> 
<IMG ALT="Mad #120" HEIGHT="58" WIDTH="45" SRC = "thumb120.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#121<BR>Sep</TD><TD><a href="mad121id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad121.html"> 
<IMG ALT="Mad #121" HEIGHT="57" WIDTH="45" SRC = "thumb121.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#122<BR>Oct</TD><TD><a href="mad122id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad122.html"> 
<IMG ALT="Mad #122" HEIGHT="59" WIDTH="45" SRC = "thumb122.jpg"></a></TD></TR> 
<TR><TD><TH ALIGN="right">#123<BR>Dec</TD><TD><a href="mad123id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad123.html"> 
<IMG ALT="Mad #123" HEIGHT="58" WIDTH="45" SRC = "thumb123.jpg"></a></TD></TR> 
 
 
 
</TABLE>

I didnt highlight all of them, but with the ones that I did I'm sure you can work it all out.