The Simple Lightbox plugin lets you add a "lightbox" effect to your blog images. Click on an image in one of your posts and, if it's linked to the (larger) original image will open in a slick semi-transparent overlay to the page, rather than in an otherwise bleak and empty webpage. Unfortunately, there are a couple of problems which stop Simple Lightbox working well with the Divi Theme. Here's what they are and how to fix them.
Fixing the Simple Lightbox "Strict" Errors
Depending on your debug settings, the first thing you may notice upon activating Simple Lightbox is a large number of error message filling the screen. They say something along the lines of:
Strict Standards: Declaration of SLB_Lightbox::_options() should be compatible with SLB_Base::_options($options_config = NULL) in C:\\blog\\wp-content\\plugins\\simple-lightbox\\controller.php on line 7
Strict Standards: Only variables should be assigned by reference in C:\\blog\\wp-content\\plugins\\simple-lightbox\\includes\\class.utilities.php on line 623
…
You have a couple of options in this case. One is that, if you don't need it, you can disable debug error messages in WordPress in general by removing this line from wp-config.php:
define('WP_DEBUG', true);
This will hide errors from all the plugins which may be a good thing. If, however, you're developing your own plugin and want to know about any errors, you can disable errors in just the Simple Lightbox plugin by changing the following in the main.php file of the Simple Lightbox plugin:
$slb = null;
To:
$slb = null; error_reporting(E_ALL & ~E_STRICT & ~E_NOTICE);
Stop Divi Top Header Overlapping Simple Lightbox
When you click on an image, the Simple Lightbox plugin tries to darken the current page and show the image in an overlaid box. However, one Divi component refuses to darken and instead sits in front of the image box – the Divi top header (the one with the email / phone details). We can fix this with the following CSS:
#slb_viewer_slb_default { z-index: 100000 !important; }
Can you add settings with footer paddings top and bottom? it will be very helpful
Hi Grzegorz, thanks for the suggestion. It's definitely something I'll look into for a future version of the plugin.
hi Guys
Where do I store # top-header {z-index: 10000! Important; }
thank you
toni
Stop Divi Top Header Overlapping Simple Lightbox
When you click on an image, the Simple Lightbox plugin tries to darken the current page and show the image in an overlaid box. However, one Divi component refuses to darken and instead sits in front of the image box – the Divi top header (the one with the email / phone details). We can fix this with the following CSS:
#top-header { z-index:10000 !important; }
Hi Elfriede, this post explains where to add the CSS:
https://divibooster.com/adding-css-to-the-divi-theme/
Just watch the spaces in the code – the way you've written it won't work – it needs to be: #top-header { z-index:10000 !important; }