Image Thumbnail Viewer II - cilck to URL

[martino]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

Hello, this script is great - just want to know if this can be applied.
I'd like to be able to go to a URL 'onclick' from the text link but still show the image on 'mouseover'

I'm using this code:

<a href="images/smallAl976.jpg" class="links-white-small" rel="enlargeimage::mouseover" rev="loadarea::AL976-Aluminum-Full-View-Door.php">AL978 ALUMINUM</a>

and this div:

<div id="loadarea" style="width: 277px"><img src="images/smallAl976.jpg" width="277" height="129" /></div>

thanks!
Martin

[jscheuer1]

You can do the following but it will be a custom mod that will no longer work for click activation.

First, in thumbnailviewer2.js change:

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

to:

var imagepath=linkobj.rel.split('::')[2]; //Get URL to enlarged image

and (also in the thumbnailviewer2.js file) get rid of this:

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

Now your links that previously were like so and similar:

<a href="images/smallAl976.jpg" class="links-white-small" rel="enlargeimage::mouseover" rev="loadarea::AL976-Aluminum-Full-View-Door.php">AL978 ALUMINUM</a>

would be like:

<a href="whatever.htm" class="links-white-small" rel="enlargeimage::mouseover::images/smallAl976.jpg" rev="loadarea::AL976-Aluminum-Full-View-Door.php">AL978 ALUMINUM</a>

Notice that the URL to the larger image has been moved to the rel attribute following an additional :: separator. The href or the link can now be to whatever you like and it will be and function as a normal link when clicked.

[martino]

Thanks John, your mod works great. However, how can I have this script work as well as: Ultimate Fade-in slideshow http://www.dynamicdrive.com/dynamici...nslideshow.htm

on 1 page?

Thanks again.
Martin

[jscheuer1]

I'm not aware of any conflict between the two scripts. Have you tried it, putting them both on the same page? The only thing I can think of that might be a problem is the defer="defer" on the thumbnail script's external script tag, that might need to be removed, but only for IE.

Now, if what you really mean is can you combine the two scripts into - say, a slide show that has the thumbnails in it, or some other way of having them work off of each other, that would be a different story.

[martino]

Hi John,

Thanks for your response. I removed defer="defer" and both scripts seem to function ok in FF3 and IE7.

What is defer="defer" anyhow?

Thanks

[martino]

However, its quite choppy without the defer="defer". Any alternatives?

Thanks.

[jscheuer1]

The defer attribute tells the browser that it may finish rendering the page before executing the script. Without it (due to how the code is written), the browser must finish rendering the page before executing the script. As far as I know only IE observes this, even though it is a standard attribute. Perhaps this is because other browsers may execute, instead of onload, on completion of the DOM loading (no images or other external resources required). So things may set up a little faster in IE with the defer attribute. However, it has been my experience that with more than one script on a page, sometimes this defer business causes a problem in IE. If it does not in this case, you may safely leave it in there.