Results 1 to 8 of 8

Thread: [DHTML] Unobtrusive Thumbnail Image Viewer

  1. #1
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up [DHTML] Unobtrusive Thumbnail Image Viewer

    1) CODE TITLE: Unobtrusive Thumbnail Image Viewer

    2) AUTHOR NAME/NOTES: Abraham Daniel - OSWC(Open Source Webmaster Center) @ http://TheXbanners.com

    3) DESCRIPTION: With the Thumbnail Image Viewer, you can quickly build an image gallery presenting your products.
    Your visitors can select which image to enlarge with the guidance of their thumbnail counterpart. It creates a virtual window with your enlarged image applied as the background. That way the image covers the entire window. The virtual window can be closed automatically,
    By means of a single click, or after a certain time interval that you specify.
    This Script is fully Unobtrusive, And works with JavaScript Disabled.
    I included an example in the zip archive. The instructions of how to use it
    are inside the sample.htm file in comments.

    4) URL TO CODE: Live Example @ http://nextglisting.com/thexbanners/...ery/sample.htm

    Download @ http://nextglisting.com/thexbanners/...ge_Gallery.zip

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    On Firefox 2.0 or Mac, does a really weird thing. The new window pops up, slowly expands down (10sec, approx), then expands to the right, about 3 sec. The computer is sluggish for this, and the hour glass is spinning, firefox unresponsive, and the graphics are problematic (the top of the window, for example, gets a strange pattern of edges of the window left behind because the browser is too busy to redraw the window while it's executing such intense Javascript).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Thumbs down

    I would not call using pop up windows 'unobtrusive'. Obtrusive is one of the defining characteristics of a pop up window.

    In the Opera browser, the positioning seems to be off. I believe this is due to the way that browser organizes its viewing area.

    I see some of the problems djr33 mentions in FF, but as I have a fast machine with plenty of RAM, they are not as severe. Not pretty though.

    I'm getting 2 windows popping up in IE 7.

    On the whole, I would have to give this one a thumbs down.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    2.33 GHZ dual processor, 2GB Ram.
    It's not my computer.
    If so, it's anyone with a Mac, and I rarely find Macs to be slower than PCs in any significant way.
    I think there's a memory leak in it, at least made clear by Firefox 2.0 for Mac.


    I'm not really sure what this is supposed to accomplish, as it isn't generated dynamically or anything like that. It's just a fancy (and sluggish, then) way to setup a bunch of links.

    Are we missing something?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    I'm running windows xp sp2 - 2.00 GHZ, 960MB RAM and tested it with IE7, Opera 9.21, Netscape 8.1.3, FF 2.0.0.5 and Safari 3.0 for Windows & didn't notice any slowdown at all.
    If you don't like the animated window, You can specify a normal window instead, e.g.
    Code:
    <a href="images/image.jpg" rel="800,600,normal,onclick">Image 1</a>
    If you want to speed up the expanding of the animated window (I think this is the cause of the slowdown you're experiencing), you can modify these two variables in the image_gallery.js
    Code:
    var heightspeed = 6;
    var widthspeed = 1;
    These values are the default. I have posted another sample page with these variables modified. You will noticed a much faster expanding of the animated window.
    http://nextglisting.com/thexbanners/...ample_fast.htm
    Here I have set the variables to
    Code:
    var heightspeed = 10;
    var widthspeed = 12;
    BTW, Thanks for the Feedback

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by AbRaMcPIMP View Post
    If you want to speed up the expanding of the animated window (I think this is the cause of the slowdown you're experiencing), you can modify these two variables . . .
    At the point where I, as a visitor to a site using this script would want to 'speed up the expanding of the animated window', I would have no way to modify any variables.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

  8. #8
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I have updated the script to be much faster.

    You can now preLoad your enlarged images. Just Insert a hidden input field,
    And give the field an id of images. In the name attribute, insert your images path, e.g.
    Code:
    name="images/"
    The last thing to do, is to insert your images name in the "value" attribute separated by commas
    e.g.
    Code:
    value="image1.jpg,image2.jpg,image3.jpg,etc.jpg"
    Here's a full example
    Code:
    <input type="hidden" id="images" name="images/" value="image_number1.jpg,image_number2.jpg,image_number3.jpg,image_number4.jpg,image_number5.jpg" />
    I have set the default width and height speed of the expanding window to 12, which is twice faster as before. If you still think it's slow, just increase the number as desired.
    The example and download links URL are still the same.

    Enjoy

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
  •