PDA

View Full Version : Image Tumbnail Viewer II - Making thumbs a link



textile
10-27-2010, 06:22 PM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

Hello,

I've put the Image Thumbnail Viewer II successfully on my site (still in development) and it works great. However, I REALLY need to make the thumbnails link to a page as opposed to the enlarged image. I don't need the enlarged image to link to anything. After searching for a while on the forums I've found out how to disable the click, but how do I make the thumb link to a page? This seems to be a surprisingly uncommon question.

I also found a resolved method for the older version of the script...but not the current (may '10) script.

Help would be GREATLY appreciated!

Thanks,
Casey

ddadmin
10-28-2010, 08:02 AM
By default the script assumes the path to the large image is defined as the href attribute value of the thumbnail link. In order to make the thumbnail a functional link, we need to modify the script so it relies on another attribute of the thumbnail to store the enlarged image path. The below modified script does this, by using the attribute "data-largeimage" instead. With it, the following is a sample thumbnail link markup:


<a href="http://cnn.com" data-largeimage="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a>

textile
10-28-2010, 05:50 PM
You sir are an angel, works perfectly! Thank you thank you thank you!

effi
10-31-2010, 05:06 PM
hi, thank you for this new property and this nice script, I was looking too !


I used to test the previous version of the script, where an image was loaded by default in the #loadarea div. (dynloadarea was the name)
I wondered how do the same with this jquery version ?
and I found the simplest solution : just put img and legend in the loadarea div of the page, and the image changes when the cursor are over the thumbs !

Red_Eclipse
06-02-2014, 03:58 PM
Hello, I have tried the above script fix


<a href="http://cnn.com" data-largeimage="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a>

and it is still not working for me. Along with the needed JS links and images, my HTML coding looks something like this:



<table style="width:1000px">
<tr>
<td><a href="newpage.html" data-largeimage="images/OriginalImage.png" rel="enlargeimage" rev="targetdiv:loadarea"><img src="images/ThumbnailImage.jpg" /></a></td>
<td><a href="images/OriginalImage2.png" rel="enlargeimage" rev="targetdiv:loadarea"><img src="images/ThumbnailImage2.jpg" /></a></td>
<td rowspan="6"><div id="loadarea" style="width:800px;height:800px"> </div></td>
</tr>
<tr>
</table>


What happens is the link works fine, however the large image never loads with the added "data-largeimage" script.