PDA

View Full Version : Resolved Click thumbnail and go to same link as large image.



madcoversite
05-18-2009, 03:10 AM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/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/madcoversite/thumbs1968-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
05-18-2009, 03:43 AM
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
05-18-2009, 04:41 AM
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
05-18-2009, 11:51 AM
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
05-18-2009, 12:44 PM
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
05-18-2009, 10:33 PM
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
05-18-2009, 11:18 PM
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
05-18-2009, 11:31 PM
What do you mean by that last thing you said? Yes, get rid of the i, my fault.

madcoversite
05-19-2009, 02:22 AM
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
05-19-2009, 02:28 AM
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.

madcoversite
05-19-2009, 11:49 AM
OK, so after doing that I lose the big image and the thumbnails don't link to their respective html pages. What you had me replace was the image location for each big image that gets loaded. The new load area took the .html, but there's no image to go along with it now. In fact you can mouse over the thumbnail and the .html for the thumb gets transfered into the load area where there should be an image. You can click on that void and go to the desired page. Wow, this is tough. Am I not getting across what I'm going for here?
Thanks

Nile
05-19-2009, 12:02 PM
In the js file, change:


var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
To:


var imagepath=linkobj.getAttribute("name") //Get URL to enlarged image


Which should be on line 20, and then on all the links, instead of giving the href attribute the image url, do:


name="image locking.jpeg"


And then, put the href location to the one you want. Did you follow all that?

madcoversite
05-19-2009, 01:19 PM
The .js change is clear to me.
Can you please give me an example on one line of my code how to make the other changes.
See if I did it right for the last image of the eight:
I changed <a href="mad123.html" rel="enlargeimage::mouseover" rev="loadarea::mad123.html">
to <a name="mad123id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad123.html">
Did you want me to keep previous .js coding changes?
The link disappears from the thumb but the larger image loads and it links to itself.

I appreciate your time.

Nile
05-19-2009, 11:18 PM
Ok, set your js file completely back to normal. Then, on line 20 of it, change:


var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image

To:
var imagepath=linkobj.getAttribute("name") //Get URL to enlarged image
[/code]

And then, in the links you'd have something like this:


<a href="mad117id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad117.html">
<IMG ALT="Mad #117" HEIGHT="58" WIDTH="45" SRC = "thumb117.jpg"></a>

Change it to:


<a href="http://google.com"name="mad117id.jpg" rel="enlargeimage::mouseover" rev="loadarea::mad117.html">
<IMG ALT="Mad #117" HEIGHT="58" WIDTH="45" SRC = "thumb117.jpg"></a>

madcoversite
05-20-2009, 12:43 AM
We are so close it's not funny.
Go to my test page:
http://www.collectmad.com/madcoversite/thumbs1968-test.html
Hovering over the thumbnails gives you the nice large image which you can click and be taken to the correct page.
The thumbnails look like they want to go to the correct corresponding page but cannot be clicked.

A very curious discovery is that I can right-click the thumbnail and select "open link" (in Internet Explorer) and it works!!!

Thanks

Nile
05-20-2009, 02:09 AM
Ok, find:


this.targetlinks[i].onclick=null
this.targetlinks[i].onmouseover=null
this.targetlinks[i].onmouseout=null
}
And change it to:


this.targetlinks[i].onmouseover=null
this.targetlinks[i].onmouseout=null
}

If that doesn't work, change it back, and delete:


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

If that doesn't work, do both.

madcoversite
05-20-2009, 02:43 AM
Taking away just
this.targetlinks[i].onclick=null
had no effect.

Taking away just

pagelinks[i]["onclick"]=function(){ //Cancel default click action return false
loses the large image and thumbnail links work (broken code symbol).

Doing both loses the large image and thumbnail links work (broken code symbol).


WHOOPS! I forgot to delete that last bracket "}" Did that and it works!!!!!!!!!!!!!!!!!!

You did it!!!

Persistence pays off again.
I whole-heartedly appreciate your efforts.
Doug

Nile
05-20-2009, 03:12 AM
Haha, yes!
Glad to help you! Your welcome!

It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"

madcoversite
05-20-2009, 03:17 PM
Nile,
Couple other things:
Why do you think Firefox shimmees and shakes on the thumbnail #118 as you glide across from other thumbs?
http://www.collectmad.com/madcoversite/index-thumbs1968.html
Do all the large images get loaded in the background when a person first stumbles upon the page?
Thanks again for the help.
Doug

madcoversite
05-21-2009, 05:31 PM
After a little research, a little shake takes place in Firefox when the browser window is maximized on my Vista laptop. Doesn't happen on other browsers or other OSs. Weird, oh well.
It does look like larger images load in the background.
Reading through some old boards I see that I'm not alone. Activating the bookmark toolbar seems to resolve the issue. There may be another work-around, but this works for now.