Open a gallery lightbox on button click

The Button module has a built-in lightbox feature, but if you put in the shortcode for a gallery, the entire gallery will display in the lightbox, rather than the individual gallery images.

You can skip the gallery display and configure the button click to display the individual gallery images in the lightbox, with previous and next navigation, as shown in this screenshot:

The instructions here will show you how to create a Gallery module and a Button module, add custom IDs, and copy in some jQuery.

1

Configure a Gallery module

Create your gallery and give it a custom ID.

  1. Add a Gallery module to your layout.
    Under the button is a nice place, because the lightbox isn't completely opaque, so when you click the button you'll see a slight background scroll.
  2. Add photos to the Gallery module in the normal fashion.
  3. On the Advanced tab in the HTML element section, for the ID field enter an ID for your gallery.
    In this example, we'll use my-hidden-gallery as the ID value,
  4. Save the module.
2

Configure a Button module

Create your button and give it a custom ID also.

  1. Drag a Button module into your layout.
  2. On the General tab, in the Link field add the pound sign (#) plus the Gallery module custom ID.
    In this example, you'd enter #my-hidden-gallery.
  3. On the Advanced tab in the HTML element section, for the ID field enter an ID for your button.
    In this example, we'll use my-open-gallery as the ID value.
  4. Enter any other style settings you want and save the module.
3

Add this jQuery code

  1. In the following jQuery code, modify the two var lines to show your own IDs that you assigned to the Gallery and Button modules.
  1. Go to Tools > Layout CSS / JavaScript, click the JavaScript tab, and paste the code.
  2. Click Save.