Product:

Wonder Slider, Wonder Grid Gallery

Tutorial:

In the tutorial available at https://www.wonderplugin.com/wordpress-lightbox/how-to-open-a-lightbox-gallery-popup-on-clicking-a-link/, we learned how to open a lightbox gallery popup by clicking a button or text link.

In this tutorial, we will add buttons to an image slider created with Wonder Slider and open a different lightbox gallery upon clicking the buttons in the slider.

An online demo is available below:

Step 1 - Create Lightbox Galleries Using Wonder Grid Gallery

In the Wonder Grid Gallery plugin, select the 'Images & Video' tab, in the 'Add Image' dialog, navigate to the 'Lightbox and Weblink' tab, and ensure that the "Click to open Lightbox popup" -> "Open current image in Lightbox" option is checked. This option is checked by default.

In the step 4 'Options' tab, select the "Lightbox gallery" option -> "Only display the first image in the grid gallery and create a Lightbox gallery".

In this step, we have created two lightbox galleries for this demo: ID 23 and ID 24.

Step 2 - Create a slider with Wonder Slider and add a button to each slide

In Wonder Slider, create a new slider or edit an existing slider, in step 1 "Images & Videos" tab, add an image. In the "Add Image" dialog, enter text to the "Button Text" input box.

After you have added all images and have defined the buttons, navigate to the step 3 Options tab, the Advanced Options tab, add the following code to the Custom JavaScript input box:

(function($){

  $(document).on("click", ".amazingslider-activeslide-SLIDERID-0 .amazingsliderbutton", function(){
    $('#wonderplugingridgallery-23 .wonderplugin-gridgallery-item-img').eq(0).click();
    return false;
  });

  $(document).on("click", ".amazingslider-activeslide-SLIDERID-1 .amazingsliderbutton", function(){
    $('#wonderplugingridgallery-24 .wonderplugin-gridgallery-item-img').eq(0).click();
    return false;
  });

})(jQuery);

In the above code, the CSS selector .amazingslider-activeslide-SLIDERID-0 .amazingsliderbutton will select the button in the first slide, the .amazingslider-activeslide-SLIDERID-1 .amazingsliderbutton will select the button in the second slide. The current slide selector .amazingslider-activeslide-SLIDERID-0 starts from 0.

The following lines will open the lightbox gallery ID 23 when clicking the button in the first slide:

$(document).on("click", ".amazingslider-activeslide-SLIDERID-0 .amazingsliderbutton", function(){
  $('#wonderplugingridgallery-23 .wonderplugin-gridgallery-item-img').eq(0).click();
  return false;
});

If you have more than 2 slides in your slider, please add the code and change the grid lightbox gallery ID accordingly.

Step 3 - Add the slider and the grid gallery shortcodes to the webpage

In your WordPress post or page editor, switch to Text mode or add a Text module, add the following code:

[wonderplugin_slider id=66]

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

66 is the slider ID created in this demo. ID 23 and ID 24 are lightbox galleries created in step 1.

To hide the lightbox galleries by default so they can only be opened by the slider buttons, the shortcodes are wrapped inside a div that has the CSS style display:none.