PDA

View Full Version : SIMPLE MOD? "Image Thumbnail Viewer II" URL link instead of Large Image Over lay



C-LOS
05-17-2012, 04:40 PM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: All the functionality of this scripts works beautifully for my needs with one major exception. I would like help/direction on how to modify the thumbnail pic/link to go to a specific URL not to just overlay the large pic in the browser window.

I found a script on a forum that instructs me to.....

*****************************
remove the rel="enlargeimage::mouseover" rev="loadarea::#"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Swap(id,url){
document.getElementById(id).src=url;
}

/*]]>*/
</script></head>

<body>
<a href="http://www.yahoo.com" onmouseover="Swap('loadarea','http://www.vicsjavascripts.org.uk/StdImages/One.gif')" title="This is an example">Thumbnail Example 1</a><br />
<a href="http://www.yahoo.com" onmouseover="Swap('loadarea','http://www.vicsjavascripts.org.uk/StdImages/Two.gif')" >Thumbnail Example 2</a><br />
<a href="http://www.yahoo.com" onmouseover="Swap('loadarea','http://www.vicsjavascripts.org.uk/StdImages/Three.gif')" title="This is an example">Thumbnail Example 1</a><br />
<img id="loadarea" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
</body>

</html>
/*]]>*/</script>
*************************
that seems to work except that the extra functionality like duration and fade/slide effect no longer work any help with this qoul be great!

ddadmin
05-17-2012, 06:10 PM
The easiest way is probably just to stick to the default version of the script, but inside the thumbnail's markup, add the new code in red:


<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" onClick="location='http://cnn.com'; return false" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />

This causes the thumbnail link when clicked on to navigate to CNN.com (while showing the enlarged image onmouseover).

C-LOS
05-18-2012, 02:36 AM
Thank you so much for this timely and simple solution! I think this is exactly what I needed!