I needed to create a photo gallery using wordpress, and decided to use a lightbox effect.

For those that don’t know: a lightbox effect is when you click on the thumbnail of a picture, and it displays a larger version of the picture overlayed on the original website (without going to a new browser window)… so it makes browsing thumbnails easier.

After trying a few different lightbox plugins, I eventually settled on WP-Slimbox2… mostly because the website seemed to have problems with most other plugins.

However, I soon found that I also had a problem with WP-Slimbox2:

Some parts of the wordpress “background” would actually show on top of the zoomed picture (the zoomed picture is supposed to be on top of the whole webite).

It turns out the theme I used wasn’t well written, and had done some crazy things with the z-image variable.

And z-image is used to adjust what elements on a page appear on top of others.

The theme was using z-image values set in the range of 10000 to 20000, while the lightbox plugin was “assuming” that themes wouldn’t have z-image values over 200.

So, I had to go through the style.css theme file, looking for z-image variables, and removed the last 2 digits of the number (eg 20,000 became 200).

And now I have a nicely working lightbox effect, with no overlay problems.