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

There are four steps in this tutorial:

• Step 1 - Install Wonder Grid Gallery
• Step 2 - Add a button, image 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.

Show All

Photo

Video

Sea

Landscape

Step 1 - Install Wonder Grid Gallery

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

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

Step 2 - Add a Button, Image, or Text Link in the WordPress Page Editor

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

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

Alternatively, to link an image, use the following code:

<a href="#" class="lightboxgallerylink"><img src="myimage.jpg" alt="Open a gallery"></a>

To create a button with the lightboxgallerylink CSS class, use:

<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), under Options, check the option "Lightbox gallery" > "Only display first image in grid gallery and create a Lightbox gallery."

In Step 4 (Options tab), under Advanced Options, add the following code to the Custom JavaScript input box:

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

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

Save and publish the gallery. The plugin will display the shortcode of the gallery, for example:

[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 and add the following HTML code:

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

In this code, 52 is the ID of the gallery. Be sure to replace 52 with your own gallery ID.

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