Results 1 to 2 of 2

Thread: Image Thumbnail Viewer II - help

  1. #1
    Join Date
    Sep 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II - please help

    SCRIPT: Image Thumbnail Viewer II
    http://www.dynamicdrive.com/dynamici...thumbnail2.htm


    Hi everyone,

    I'm new here and this is my first post.

    The way I want it to work is when you click on a thumbnail, it will load a larger version of the thumbnail on the same page (this is currently working fine). I then want when you click on the larger image for it to open a new window that displays an even larger size. I currently have the popup working but can figure out how to pass the image size. I was trying to load the image sizes into the "dynimages" array and pass it to the "returnimgcode" function. Any idea how I can acheive this?

    Can I store the height and width in the array as in the example below and then read it in later?

    dynimages[0]=["wed01_medium.jpg", "wed01_large.jpg",600,300]

    The line of code that is giving trouble is:
    imghtml='<a href="'+theimg[1]+'" onclick="window.open(this.href,\'popupwindow\',\'width=500,height=500,scrollbars=no,statusbar=no,resizable=yes,\');return false;" target="_blank">'


    I think it's pretty easy but I can't figure it out. Since I changed the code slightly, please see the code below...


    -------------------
    <script type="text/javascript">

    /***********************************************
    * 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
    ***********************************************/

    //Specify image paths and optional link (set link to "" for no link):
    var dynimages=new Array()
    dynimages[0]=["wed01_medium.jpg", "wed01_large..jpg"]
    dynimages[1]=["wed02_medium.jpg", "wed02_large..jpg"]
    dynimages[2]=["wed03_medium.jpg", "wed03_large..jpg"]


    //Preload images ("yes" or "no"):
    var preloadimg="no"

    //Set optional link target to be added to all images with a link:
    var optlinktarget=""

    //Set image border width
    var imgborderwidth=0

    //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
    var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

    ///////No need to edit beyond here/////

    if (preloadimg=="yes"){
    for (x=0; x<dynimages.length; x++){
    var myimage=new Image()
    myimage.src=dynimages[x][0]
    }
    }

    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" onclick="window.open(this.href,\'popupwindow\',\'width=500,height=500,scrollbars=no,statusbar=no,resizable=yes,\');return false;" target="_blank">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }

    function modifyimage(loadarea, imgindex){
    if (document.getElementById){
    var imgobj=document.getElementById(loadarea)
    if (imgobj.filters && window.createPopup){
    imgobj.style.filter=filterstring
    imgobj.filters[0].Apply()
    }
    imgobj.innerHTML=returnimgcode(dynimages[imgindex])
    if (imgobj.filters && window.createPopup)
    imgobj.filters[0].Play()
    return false
    }
    }

    </script>

    ------------------

    <div id="dynloadarea" style="width:5px;height:50px">

    -------------------

    <img width="41" height="47" src="wed01_thumb.jpg" border="0" onClick="modifyimage('dynloadarea', 0)">

    -------------------

    Thanks in advance for your help!
    Rick
    Last edited by res11295; 09-06-2005 at 09:00 PM. Reason: typos

  2. #2
    Join Date
    Sep 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This has been resolved. Thanks!

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
  •