View Full Version : Can I add an overlay to Image Thumbnail Viewer?

11-08-2007, 12:00 PM
1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

I am currently using this script with a glider script that uses Prototype and because of this, I cannot get any other script that uses prototype to work, such as the generic Lightbox script that you see everywhere.

So, the alternative script that I want to work is this Thumbnail Viewer, which appears to be working fine (though I have not tested this in IE on a PC yet), however, I am running into a couple of bugs that I would like to resolve, if possible.

Here's my site that is a work in progress:

To start, click on a thumbnail...

Problem #1: The scrollbarwidth in the javascript file of the Image Viewer is set to 16, which appears correctly in Firefox, but for some reason, the div in Safari is appearing more to the left. I am on a mac testing this, so let me know if you see other issues on a PC. Is there a workaround for this so this div is in the center and the width of the div aligns perfectly with the width of the page layout behind it? Does that make sense?

Problem #2: The more pressing issue for me is that in a 1024X768 resolution, without an overlay or mask behind the div that pops up, I feel like the controls for the glider on the main page almost look like they are part of the div that pops up with the full-sized image. Do you see what I mean? This concerns me since if you hit those, the glider will still function. So, therefore, when you hit the "Close Window" button, you could be on a different div with thumbnails than you were when you selected the first one to open the larger image. I am not sure if I am explaining this well, but let me know if you need clarification.

Basically, I feel like if I was able to add an overlay behind the popup div to this current javascript code, that would resolve the problem without me redesigning the interface for that gliding section.

Thank you in advance. :D

11-08-2007, 05:00 PM
First of all, I'm assuming that you tried using lightbox, right? I only ask because the reason that you give for it not working is wrong. Any script that uses prototype.js should be able to work with another script that uses prototype.js. If it doesn't, it's not because of prototype.js, it is a conflict with the other script.

It would probably be best to either integrate (resolve the problems between) two scripts using prototype.js or to use two other scripts that could work off of the same library(ies) (prototype.js is just a library of javascript functions, and not the best one at that), or that require no library(ies).

There is a script call slimbox, that is a 'lightbox clone' and that does not use prototype.js though, if you want to try it:


I think you have another problem though, whatever you are using for the lightbox type effect, it doesn't appear to work once you scroll to the next set of 6 images. If the reason for this is what I'm guessing, lightbox would actually be one of the easiest to get to work with the scrolled in images.