Elementor Lightbox

/ Comments off



Browse other questions tagged wordpress lightbox elementor or ask your own question. The Overflow Blog State of the Stack: a new quarterly update on community and product. Update the Elementor Plugin’s Global Setting to Turn Lightbox OFF. To prevent double opening of a lightbox, we are turning off the Lightbox setting, which is on by default, in Elementor. Use the Simple Lightbox Plugin.

I wanted to make a WordPress post that showed a drawing’s progression log like I have done in the past on my Tumblr. For Tumblr, the web application interface lets you re-arrange the images in size and order and makes the photoset a slideshow. You can also put captions in that will appear under the photos in the slideshow, and that slideshow lets you navigate using the right and left arrow keys. This is not specific to only Tumblr but uses the Javascript library, Lightbox, which I have little experience with. However, I do have plenty of experience making Tumblr photosets.

Open Lightbox

This post will break down the steps I took to accomplish that goal should I need to find it again or if any readers find the information useful. Before I start, I will say that Tumblr Photoset Grid/Masonry Gallery for WordPress by sike is a $12 plugin I found that, by its description at least, would have done exactly what I wanted. Most of the information you would need for what I ended up doing instead are in this video, How to create masonry style gallery in Elementor Page Builder for WordPress.

As I made this post, I noticed the Simple Lightbox alone would also work for my main goal of a series of images in a single column and through regular WordPress posts, without Elementor so long as the images link to the media file. Still, this information is useful for if I ever want to do more columns in masonry gallery format.

1. Use the Elementor Plugin

Install and activate the Elementor plugin if you are not already using it in your WordPress site. Elementor alone can let you put in an image gallery that can be a single column and act as a slideshow, but I ran into an issue where the captions would not show, not even on the actual post as described that it should in the documentation. For some users, showing the captions below the images within the gallery is actually unwanted. In any case, I wanted to put text somewhere, it didn’t have to be image captions per se though it was preferable at first, and Elementor alone was not going to be enough.

2. Update the Elementor Plugin’s Global Setting to Turn Lightbox OFF.

To prevent double opening of a lightbox, we are turning off the Lightbox setting, which is on by default, in Elementor.

Elementor Lightbox Text

3. Use the Simple Lightbox Plugin

Lightbox

Install and activate the Simple Lightbox plugin. If you need to update any of the settings, you can do so through the Plugins page or under Appearance from the WordPress dashboard, then choosing Lightbox.

4. Create Post Using Elementor

For the type of post I was trying to do this for, I created a single-column post where I show a starting progression at the top and finished image at the bottom. You can do the actual columns and sizes however you want, that is the benefit of this masonry gallery approach. Gl glut.h no such file or directory dev c++yellowtickets. The next step is the really key one.

Elementor

5. Create Image Widgets and Link Each One to Media File

Because we are using individual image widgets instead of an overall image gallery, we have more freedom with the content between the images so instead of putting the captions with the image properties and showing in the Lightbox, I’m actually placing them above each image as I explain my process. With our Elementor plugin already set to have Lightbox OFF by default, we can now leave it to the Simple Lightbox plugin to create the slideshow and group the images together automatically. Preview or update the page too see the Lightbox single-column in action.

6. Adjust CSS

This step can be skipped if you are happy with the Simple Lightbox default look. I updated some of the CSS to my own preference because of past familiarity with Tumblr photosets.

The following was added through Appearance, Additional CSS:

Within the post I was working on, I also hid the details in case I end up using captions more often in the future and the post being worked on turned out to be an exception rather than a rule for how I want the text describing images to look.

Elementor Lightbox Not Working

DONE!

You can see the final results of my efforts in my Chaos with Claws Progression Log.

Further Notes

Another option I considered was to have a slideshow at the top and then show the progression log as individual images below it. I also tried out a plugin called Smart Slider 3 that looked really good for slideshows in general but then realized I still wanted my single column of each image in the set to be visible on the page. I even thought of having 7 different slideshows and putting them all on the same page but that was too much work for something that could be done better another way.

If you appreciate any of the work that went into making this post, please consider giving a tip to my PayPal account or supporting me on Patreon.

  • Hello,

    I’ve noticed recently that our lightbox no longer works for product page images when using the WP Image Zoom plugin in tandem.

    From my testing, if I disable the WP Image Zoom, the lightbox for Elementor just doesn’t work at all. If I enable WP Image Zoom, the lightbox also works; however, it doesn’t load the image. the lightbox & controls popup but there’s no image that displays no matter how long I wait.

    Are there any suggestions for further diagnosing or any ideas that could be causing this?

    Thanks,
    Jordan.

    The page I need help with: [log in to see the link]

Create Lightbox

  • The topic ‘Conflict between Elementor Lightbox + WP Image Zoom’ is closed to new replies.