Gallery

The Gallery module is used to display a gallery of images from either the WordPress Media Library or a SmugMug gallery that you specify.

Uses of the Gallery module​

The Gallery module is used to display a collection of individual photos in a pleasing fashion. Depending on what happens when users click a module (see the section on the module's settings), you can use the Gallery module to:

• Display the series of photos one by one in a lightbox with navigation aids. This works particularly well when the gallery images are displayed in a small size that users can open to view a larger version of the image.

• Display the full-sized image on a page of its own. This option works well when the intention is for viewers to right-click and download single images, such as for an image library.

• Gallery images don't have a clickable link. You might want to display the gallery as images that are large enough to view clearly and really don't need to be expanded to a larger size.

Gallery modules are often used as shortcodes in other modules or even in posts that use the WordPress Standard editor. For example, you could insert the shortcode for a Gallery module into a tab in the Tabs module or an item in the Accordion module to show a collection of images on a particular tab or in an expanded accordion section respectively.

Properties of the Gallery module​

You can display the gallery in either a Thumbs or a Collage layout.

The ordering of the photos in both the Collage and Thumbs layouts matches the WordPress media gallery order that you set up. When you create or edit the WordPress gallery, you can reorder the images by dragging and dropping.

Gallery module settings​

General tab​

Layout

Collage or Thumbs.

Source

Choose the WordPress Media Library or SmugMug. For the Media Library, in the Photos field choose the images you want to include. For SmugMug, see the instructions below.

Photo size

This field appears for Collage layouts only. The Thumbs layout always displays WordPress thumbnails, either the default 150x150 or custom size you've set.

Show captions

If you select this option, image captions are pulled from the Media Library or the SmugMug library. By default, longer captions are cut off with elliptical periods. See this article for the CSS to insert a full wrapped caption.

Click action

Specify what happens when an image is clicked:

None

No action.

Lightbox

Open the image in a lightbox with Previous and Next arrows. You can choose the max size on devices large enough to display it.

Photo link

Use the image URL to open a large-sized image displayed on a page with no theme or other formatting and no navigation links to the other images in the gallery. The large size in WordPress by default is a max height and max width of 1024px (or the full size of the image if you uploaded one less than 1024px).

Style tab​

Photo spacing The horizontal and vertical spacing between the images, in pixels.

Photo border The standard Accept Builder borders and border effects.

Use a SmugMug gallery​

1. Navigate to the SmugMug gallery you want to use.

2. Scroll down to the footer and click the Feed icon, then select RSS.

Gallery Lightbox

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 configure the button click to display the individual gallery images in the lightbox, with previous and next navigation.

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

1. Create a Button module​

Create your button and give it a custom ID also, using these instructions.

1. Drag a Button module into your layout. Leave the Click Action set to Link but don't add a link. The link will be set by the jQuery.

2. On the Advanced tab in the HTML element section, enter an ID for your button in the ID field. In this example, we'll use gallery-1-button as the ID value.

3. Enter any other style settings you want for the button and save the module.

2. Create a Gallery module​

Create your gallery and give it a custom ID using these instructions.

1. Add a Gallery module to your layout. Placing the gallery in a row under the button is a good place. The jQuery will keep the gallery from being displayed on your main page.

2. Add photos to the Gallery module in the normal fashion.

3. On the General tab, set Click action to Lightbox and select the size of image you want to display in the lightbox.

4. On the Advanced tab, in the HTML element section, enter an ID for your gallery in the ID field. In this example, we'll use gallery-1 as the ID value,

5. Save the module.

3. Add the jQuery code​

Add the jQuery code using the following instructions.

1. In the Beaver Builder editor, click the down arrow in the Title bar in the upper left corner to open the Tools menu, then choose Layout CSS & JavaScript.

2. Click the JavaScript tab, then paste in the following code.

   jQuery(document).ready(function ($) {
     var galleryid = "#gallery-1"; //Gallery ID
     var buttonid = "#gallery-1-button"; //Button ID
   
     if ("undefined" !== typeof FLBuilderConfig) {
       return;
     }
   
     jQuery(galleryid + " .fl-photo-img").hide();
   
     jQuery(buttonid).on("click", function (e) {
       e.preventDefault();
       $(galleryid + " img")
         .first()
         .trigger("click");
     });
   });

3. Change lines 2 and 3 to the ID values that you assigned to the Gallery module and the Button module respectively.

4. Click Save to save the code.

5. Publish the page. Hold down the Shift key and click the Refresh icon to clear your browser cache, then test your button.

TIP

If you're using more than one button and gallery lightbox on the same page, duplicate this jQuery code and change the ID values to match each button and gallery.

Advanced tab​

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.