StokeBloke.com

I have recently been integrating Lightbox v2 into a few websites, but on one if these I started to see something very strange.

On pages which were long there was a problem with the Lightbox ‘window’ appearing very low on the page or ever off the bottom of the page.

The problem gets worse the further down the page you go. So at the top of the page the lightbox location is correct, half way down the page it was only about 100 pixels off, but by the end of the page the top of the lightbox window is below the centre of the screen and ends below the bottom of the browser.

After some searching I found a few other pages with the same problem. One being here.

The problem is caused by a bit of code in the lightbox.js file. For some reason the top of the lightbox is calculated based on the height of the view port. I don’t know why this is done, but it doesnt work.

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

I simply wanted the lightbox to appear in the same location regardless of how far the user has scrolled down the page. I changed the line to be this :

var lightboxTop = 50 + arrayPageScroll[1];

This makes the lightbox ‘window’ appear 50 pixels from the top of the browser.

This entry was posted on Friday, June 18th, 2010 at 8:55 am and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.