Results 1 to 2 of 2

Thread: Modifying "Image Thumbnail Viewer II"

  1. #1
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Modifying "Image Thumbnail Viewer II"

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem:
    I'd like to do two things that I'm not sure how to do.

    1. I'd like the "title" to appear somewhere other than immediately below the picture. Ideally, I'd like to define the position of the title in the same way that the position of the enlarged photo is defined. For example, when the thumbnail is hovered over, the "title" of the image appears somewhere far far away from the enlarged image, not directly under the enlarged photo. OR - If the title could "float" right on top of the enlarged image, that would be pretty awesome.

    2. I'd like to pop-up another window when a thumbnail is clicked on. For example, when I hover on the first thumbnail, picture1.jpg should enlarge as normal, but when I click on the first thumbail, picture1.html should popup in a new window.

    Any ideas how I might go about doing this?

    Thanks!

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

    Default

    Sure, both requests are pretty easy to implement. Firstly, use the attached thumnailviewer2.js file instead of the original one. Then, where as before you would define just a single DIV to house the enlarged images, for example:

    Code:
    <div id="loadarea" style="width: 600px"></div>
    Now, add to that another DIV on your page in the form:

    Code:
    <div id="loadarea-title" style="width: 600px"></div>
    In order words, suffix the original DIV id with "-title". This DIV will be used to display the title of the image.

    Regarding the popup window bit, this is controlled by this line inside the .js file:

    Code:
    window.open(this.href, "", "width=500px, height=500px")
    You may want to edit the window attributes based on what's available (see bottom of this page).

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
  •