Results 1 to 5 of 5

Thread: Photo Album/Image Thumbnail Viewer II/Light Box Combo

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

    Default Photo Album/Image Thumbnail Viewer II/Light Box Combo

    1) Script Title: Photo Album Script v2.0

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

    3) Describe problem: I have a current page that I am working from that is using the Photo Album Script and the var Array section to pull photos from a database as the source. But I am looking for more of an arrangement of the images like in Image Thumbnail Viewer II, where it has one large image and the rest as thumbnails until they are clicked or moused over. I don't want to change to the Image Thumbnail Viewer II cause I lose my var Array area to find the photos. I also want to be able to click on the selected larger image to pop up larger like in the original Image Thumbnail Viewer. I want to be able to have the three different images by just using the one file as well.

    I saw there was a post of combining Image Thumbnail Viewer with Photo Album but I dont believe that gives me the small thumbnails with the larger one to start and then goes the extra step to enlarge it again.

    Any ideas would be most helpful!

    Jolie

  2. #2
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Well, it shouldn't be hard to have a larger image shown inline on the page when one of the thumbnails within Photo Album is clicked on, by using the thepics.onselectphoto event handler of the script. Getting them to show onMouseover is more tricky though. Assuming the former is fine, are you then asking how to integrate Image Thumbnail Viewer I (not II) to the enlarged image?

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    vestagirl (04-11-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default larger image on click

    It is ok for it to show up on click instead of mouseover, however unless I am mistaken, the photo album only shows all images as the same size, I am looking for a layout which shows the clicked on image as a larger size next to the other thumbnails and also able to click on that featured image into a pop up window like in Thumbnail Viewer I. Thanks again for your help!

  5. #4
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Sorry for the delay. Try the below.

    First, when defining the images to be shown inside Photo Gallery script, define both the image's src parameter and link parameter (1st and 3rd) at the very least:

    Code:
    myvacation[0]=["photo1.jpg", "", "large1.jpg"]
    myvacation[1]=["photo2.jpg", "", "large2.jpg"]
    myvacation[2]=["photo3.jpg", "", "large3.jpg"]
    Also add an arbitrary DIV like the below to the BODY section of your page:

    Code:
    <div id="enlargedarea"></div>
    When a thumbnail is clicked on, it will load the initial image (ie: photo1.jpg) in the DIV above (id=enlargedimage) on the page. When that image is clicked on again, it will load the image specified in the link (ie large1.jpg) using Image Thumbnail Viewer.

    So with the above done, install Image Thumbnail Viewer on the same page as where your thumbnails are. You can skip Step 2 in the default instructions.

    Finally, make use of the onphotoselect event handler at the end of the gallery's initialization code and containing the code shown:

    Code:
    myvacation[0]=["photo1.jpg", "", "large1.jpg"]
    myvacation[1]=["photo2.jpg", "", "large2.jpg"]
    myvacation[2]=["photo3.jpg", "", "large3.jpg"]
    "
    "
    thepics.onselectphoto=function(img, link){
    var enlargedarea=document.getElementById('enlargedarea')
    enlargedarea.innerHTML='<a href="'+link.href+'" onClick="thumbnailviewer.stopanimation(); thumbnailviewer.loadimage(this); return false"><img src="'+img.src+'"/></a>'
    return false
    }
    Let me know how this works for you.

  6. #5
    Join Date
    Apr 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    That worked awesome! Thanks so much!

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
  •