• Home »
  • Insights »
  • WordPress Lightbox 2 Plugin Pop Up Falling Behind WordPress Theme Content

WordPress Lightbox 2 Plugin Pop Up Falling Behind WordPress Theme Content

Typically I will use the WordPress Lightbox 2 plugin to provide a format for images within posts on a WordPress site. Basically this plugin provides an ajax window that images open in and you can scroll between the images with mini arrows to the left and the right side or you can close the image with a close button that appears at the bottom right of the image display. You can also change any of this appearance easily through the various CSS files included with four different default themes with Lightbox 2. While working on a WordPress site earlier tonight I ran into an issue where the lightbox 2 image pop up was falling behind the body content. The fix ended up being easy but it needed to be pointed out for others to fix quickly.

WordPress Lightbox 2 Image Pop Up Displayed Behind Body Content:

So initially I thought some JavaScript was conflicting as this was a WordPress theme I had never used before however after troubleshooting I learned this was not the case. I disabled all of the JavaScript in the theme and ended up still having the same issue. Next I started looking at CSS which is where I discovered the issue which is described below as well as explaining how Lightbox should display.

Modified Z-Index CSS Setting For Lightbox Image To Display Properly:

In the lightbox.css file located within the lightbox-2 Themes directory there is a z-index parameter that can be modified to resolve the issue. It turns out that the theme I was using also layered items using z-index which caused the z-index setting within the Lightbox CSS file to be to low and so it displayed behind the actual content of the page. By modifying the lightbox.css file as described below the lightbox image content should take a higher priority and display correctly above the content as shown in the below example image.

WordPress Lightbox 2 Image Pop Up Windows Example:

Lightbox 2 WordPress Z-Index Set Higher

In the above example image the body content is what is displayed behind the image window. Modify the lightbox.css file which can be found at the below path.

lightbox.css File Location’s:

/wp-root/wp-content/plugins/lightbox-2/Themes/White/lightbox.css
/wp-root/wp-content/plugins/lightbox-2/Themes/Dark Grey/lightbox.css
/wp-root/wp-content/plugins/lightbox-2/Themes/Black/lightbox.css
/wp-root/wp-content/plugins/lightbox-2/Themes/Grey/lightbox.css

You should open lightbox.css for the theme you have configured in your favorite text editor and modify the the z-index setting under stimuli_lightbox. Both the original setting and the modified settings are shown below.

Original CSS Z-Index Setting For stimuli_lightbox:

#stimuli_lightbox {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 10;
        text-align: center;
        line-height: 0;
}

Modified CSS Z-Index Setting For stimuli_lightbox:

#stimuli_lightbox {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 10000;
        text-align: center;
        line-height: 0;
}

Now save the changes to the lightbox.css file, refresh the page where you were viewing he image pop up fall behind the content, and test clicking on the image again. This time the image should display properly as shown in the above example image.

Learning jQuery 1.3 (From Technologies to Solutions) (Paperback)

By (author): Jonathan Chaffer, Karl Swedberg


List Price: $39.99 USD
New From: $10.00 USD In Stock
Used from: $0.01 USD In Stock

CSS: The Missing Manual (Missing Manuals) (Paperback)

By (author): David Sawyer McFarland


List Price: $34.99 USD
New From: $3.40 USD In Stock
Used from: $0.01 USD In Stock

Share