[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

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

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.

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?

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 :)

Quote:

---

Originally Posted by AbRaMcPIMP

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.

You mean like this http://nextglisting.com/thexbanners/...ple_custom.htm :confused:

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 :)