Combine Thumbnailviewer with Thumbnailviewer2

**ivan** · 03-16-2008, 03:45 PM

URL's:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Hello,

I have 3 thumbs from the same image:
- Thumb, a image from 80*60px
- Bigthumb, a image from 250*200
- image, a image from 800*600

I want to do the following:

If you click the Thumb, Thumbnailviewer2 changes to Bigthumb, this is not any problem.

If you click on the Bigthumb it has to popup using Thumbnailviewer to image..

i did the following...

The HTML To show the images

Code:

<html>
<head>
<script>
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer"></script>
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript"></script>
</head>
<body>
<a href="/occasions/bigthumbs/9-1.jpg" rel="enlargeimage::click" rev="loadarea::/occasions/9-3.jpg"><img src="/occasions/thumbs/9-1.jpg" border="0" width="83"></a>
<a href="/occasions/bigthumbs/9-2.jpg" rel="enlargeimage::click" rev="loadarea::/occasions/9-3.jpg"><img src="/occasions/thumbs/9-2.jpg" border="0" width="83"></a>
<a href="/occasions/bigthumbs/9-3.jpg" rel="enlargeimage::click" rev="loadarea::/occasions/9-3.jpg"><img src="/occasions/thumbs/9-3.jpg" border="0" width="83"></a>
<div id="loadarea" style="width: 250px"><a href="/occasions/9-3.jpg" rel="thumbnail"><img border="0" src="/occasions/bigthumbs/9-3.jpg"  border="0" width="250" height="200"></a></div>
	
</body>
</html>

The Thumbnailviewer2.js line 24-26

Code:

var imageHTML='<img src="'+imagepath+'" style="border-width: 0"  width="250" height="200" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'" rel="thumbnail" >'+imageHTML+'</a>'

What do i wrong??

**ddadmin** · 03-17-2008, 12:30 AM

Adding rel="thumbnail" to the HTML generated by TV2 won't do:

Code:

imageHTML='<a href="'+dest+'" rel="thumbnail" >'+imageHTML+'</a>'

That's because TV1 only parses the page looking for the "rel" attribute when the page first loads, and that's it. The above set up occurs after the fact so to speak.

Basically what you want to do is try and call:

Code:

thumbnailviewer.stopanimation()
thumbnailviewer.loadimage(imagesrc)

directly when each enlarged image is clicked on, with imagesrc being the URL to the image you wish to then load in TV. See this post for related info.

Untested, but the idea would be to modify TV2 with the code in red:

Code:

imageHTML='<a href="'+dest+'" onClick="thumbnailviewer.stopanimation\(\); thumbnailviewer.loadimage\(this.href\); return false" >'+imageHTML+'</a>'

**ivan** · 03-17-2008, 09:34 AM

Thanx for your great help, it worked.

Inside TV2 i changed line 26 to

imageHTML='<a href="'+dest+'" onClick="thumbnailviewer.stopanimation(); thumbnailviewer.loadimage(this); return false" >'+imageHTML+'</a>'

See the red part..

Thread: Combine Thumbnailviewer with Thumbnailviewer2

Thread Tools

Search Thread

Combine Thumbnailviewer with Thumbnailviewer2

Bookmarks

Bookmarks

Posting Permissions