Making Simple Lightbox Work with Divi

This post may contain referral links which may earn a commission for this site

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; }

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. Can you add settings with footer paddings top and bottom? it will be very helpful

    Reply
    • Hi Grzegorz, thanks for the suggestion. It's definitely something I'll look into for a future version of the plugin.

      Reply
    • 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; }

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *