Elementor Tip: Merged Galleries

Suppose you have two Galleries on the same page, and you want the Lightboxes of both to be the same.

This is useful, for example, when you have a row of three images and then a row of two images, because you have five images total and you don’t want to use a gallery of five images, make sense? Visually you have

A B C
D E

That is, three images ABC in one gallery, on top of two images DE in another gallery.

The galleries aren’t linked normally.

So what you do is add a bit of javascript in the form of an HTML widget, thus:

<script>
jQuery(‘.e-gallery-item’).data(‘elementor-lightbox-slideshow’,’merged-slideshow’);
jQuery(‘.e-gallery-item’).attr(‘data-elementor-lightbox-slideshow’,’merged-slideshow’);
</script>

This is basically telling all of the .e-gallery-items to change their “elementor-lightbox-slideshow” value to be the same— originally they will have different random numbers assigned.