How to open a lightbox gallery popup on clicking a button or text link

Last updated on

This tutorial will guide you how to open a lightbox gallery popup on clicking a button or text link.

There are four steps in this tutorial:

  • Step 1 - Install Wonder Grid Gallery
  • Step 2 - Add a button or text link in WordPress page editor
  • Step 3 - Create a lightbox gallery in Wonder Grid Gallery
  • Step 4 - Add the lightbox gallery to the page

An online demo is as follows: Open Lightbox Gallery.

Step 1 - Install Wonder Grid Gallery

First please install the WordPress premium plugin Wonder Grid Gallery. Wonder Grid Gallery can help you create gird photo and video galleries. By using its built-in lightbox feature, we can also use it to create a WordPress lightbox gallery.

You can download the free trial version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

Step 2 - Add a button or text link in WordPress page editor

Edit your WordPress page or post, add a link, add # to the link href and assign a CSS class lightboxgallerylink. The HTML code will be something like:

<a href="#" class="lightboxgallerylink">Open Lightbox Gallery</a>

Or to create a button and assign a CSS class lightboxgallerylink:

<button class="lightboxgallerylink">Open Lightbox Gallery</button>

Step 3 - Create a lightbox gallery in Wonder Grid Gallery

In Wonder Grid Gallery, create a new gallery, in step 1, Images & Videos tab, add images and videos, in step 4 Options tab, Options, check the option "Lightbox gallery" > "Only display first image in grid gallery and create a Lightbox gallery".

In step 4 Options tab, Advanced Options, add the following code to the Custom JavaScript input box:

(function($) {
  $(document).ready(function() {
    $(".lightboxgallerylink").click(function() {
      $('#wonderplugingridgallery-GRIDGALLERYID .wonderplugin-gridgallery-item-img').eq(0).click();
      return false;
    });
  });
})(jQuery);

In the above code, lightboxgallerylink is the CSS class we added to the text or button link in step 2.

Save & Publish the gallery, the plugin will display the shortcode of the gallery, for exmaple:

[[wonderplugin_gridgallery id=52]]

In the above code, 52 is the ID of the gallery.

Step 4 - Add the lightbox gallery to the page

Edit the WordPress page or post, add the following HTML code:

<div style="display:none;">
[[wonderplugin_gridgallery id=52]]
</div>

In the above code, the number 52 is the ID of the gallery. Please make sure to change the number to your own gallery ID.

Save the page and test the effect in the published web page.