voodish logo
tweet rss book of faces Linked In

Lightbox opens at bottom of the web page (fixed)

lightbox css

The number one reason for this happening is down to not linking to your lightbox.css corrrectly.

Check and double check you are linking correctly to your lightbox.css file.

Whilst developing sites with various CMS’s (Content Management Systems) it is easy to create an erronous link to the lightbox css amongst the various templates and themes, so to fix the lightbox opening in the footer / bottom of the page check the css link first.

Below are some other options if this doesn’t solve your lightbox problem.

Other fixes

If you are absolutely sure you are linking to your lightbox.css correctly then try:

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

=> change to
var lightboxTop = arrayPageScroll[1] + 200;

Related Articles

Comments RSS Feed


  1. Oli April 11, 2011

    Thanks for the answer solved the problem perfectly.

  2. Go to Top of the page

  3. admin April 11, 2011

    Great stuff, glad it was helpful Oli :)

  4. Go to Top of the page

  5. Aly August 26, 2011

    Did exactly what you said but it’s still not working. I have double checked my CSS and my html 100 times… everything is correct!

  6. Go to Top of the page

  7. Lightbox June 7, 2012

    The Lightbox Gallery Resource is a contributed module for Moodle 1.8 or later. This resource allows you to create image galleries within your Moodle course. The Lightbox system is a set of scripts than can be used to apply various effects to image galleries.

  8. Go to Top of the page

  9. Ofer June 25, 2012

    Unbelieavable, I copied the fancybox css directly to the product page and it solved it

  10. Go to Top of the page

  11. Dsquared June 9, 2013

    Had been trying to link to lightbox.css with my header tag, however, need to pull out and list directly in header.

    Your tip lead me to this change! Thank you!

    …%was here incorrectly%…

  12. Go to Top of the page

Leave a comment