Results 1 to 3 of 3

Thread: Combine Thumbnailviewer with Thumbnailviewer2

  1. #1
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Combine Thumbnailviewer with Thumbnailviewer2

    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??

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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>'
    Last edited by ddadmin; 03-17-2008 at 12:36 AM.

  3. #3
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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..

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •