View Full Version : Center or Scroll Light Box (image viewer)

05-25-2009, 02:22 AM
Hi there.
I recently downloaded, and implemented into my website, Glassbox
From here: http://www.glassbox-js.com/

Now I am using it as a light box, In my case I have a few thumbnail images, which, on click opens a pop up window and displays larger versions of the image.
Example here: http://www.glassbox-js.com/examples/lightbox_effects.htm

As you can see from the example, the box is placed perfectly in the middle of the page.

My problem is: The image I am trying to enlarge using Glassbox, is at the bottom of the page.
And the glass box script does not scroll with the page, so when a user clicks on the thumbnail, the pop up window with the enlarged image, stays at the top of the page.
I either need the Pop Up to center in the scrolled position of the website, or scroll with the we page.
So if the thumbnail picture is at the bottom of the page, the pop up will appear at the bottom of the page.


In the above example, If you close the pop up window, and scroll ALL THE WAY to the bottom, and click the show button, you will see nothing.
But if you then scroll up, you notice the window did appear, but at the top of the page, and not the area in which you scrolled.

So, how can i fix this?
I do not have a lot of java script experience, so if one of you would be kind enough to quickly build the code, please. :D

Alright, here is another light box script from Dynamic Drive, which has an example of what i would like. Its called FaceBox
Link: http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

and Here is its JS file: http://www.dynamicdrive.com/dynamicindex4/facebox/facefiles/facebox.js

The box positioning code is at the end of the file.

Now here is the Glass box JS file

I would post the code, but it is kind of long.
All the code i think you need is in the above links.
If you need to see any other code, just ask.
I'm guessing here is when it gets its position from.
This is from the Glassbox JS file

//this.glassbox.style.cursor = "pointer";
//this.glassbox.style.cursor = "hand";
this.glassbox.style.position = "absolute";
this.glassbox.style.left = Math.round( ( this.screenWidth - this.glassboxWidth ) / 2 ) + "px";
this.glassbox.style.top = Math.round( ( this.screenHeight - this.glassboxHeight ) / 2 ) + "px";
this.glassbox.style.zIndex = 1000;
this.glassbox.style.minWidth = this.glassboxWidth + "px"

Anyway, if someone can please help me out, or at least point me in the right direction, i would greatly appreciate it.
If you need anything else, please ask.

Thanks in advanced for all those who respond, and try to help me out. :D


PS, Also attached the files.