Using the FooGallery PRO Lightbox

FooGallery PRO now includes a built-in lightbox. Below is a screenshot of how images will appear in the lightbox. In this mobile view you can see the navigation and control buttons on either side and to the top right of the image. Below the image is a thumbnail strip displaying the images in the gallery.

FooGallery PRO Lightbox in action

The FooGallery PRO Lightbox is fully customizable. This means you are able to change the colors of your controls, the position of the controls, thumbnail strip and captions, and you are able to set the lightbox to auto progress.

Below we take you through the settings for the lightbox.

Selecting the FooGallery PRO Lightbox

The FooGallery PRO lightbox is set to show up as the default lightbox. However, if you have changed your defaults, or want to change your lightbox, then you would go to the general settings in your gallery to do this.

Here you would find the Lightbox selection. The drop down menu will show FooGallery PRO Lightbox, and other lightboxes you may have installed (such as FooBox) and None. Make sure the Pro Lightbox is selected.

Enable FooGallery PRO lightbox

Note: If you want to use a different lightbox, or none at all, then you would change this here.

Customizing Your Lightbox

The FooGallery PRO lightbox is easy to customize. You’ll find various settings under the Lightbox tab in your gallery settings.

Note: You will need to have the FooGallery PRO Lightbox enabled, though, for these settings to apply.

Theme

As a theme, you can select Inherit, Light or Dark. The Inherit setting will allow your lightbox to inherit the colors you are currently using in your theme.

Selecting Custom Color for either one or both of the Control or Control Hover Color allows you to set the color for the controls in the lightbox.

Custom Color Options

Once you select either of these options, you will be given a choice of colors. Selecting a hover color different to the Control Color will simply change the control color when hovered over.

Custom color selection

Thumbnail Strip

The thumbnail strip shows the thumbs for the images in the gallery. You can set these to appear above, below or to the left or right of the image being viewed. Alternatively, you can hide the thumbnail strip.

You are also able to set the thumbnails to contain captions or not.

Transition

The transition refers to the way the images change from one to the next. You have four options here. Images can fade into the next one. The can move horizontally or vertically to the next image. Or you can select None, in which case there will be no transition effect and each image will simply replace the previous one.

Captions

With the FooGallery PRO Lightbox, you are able to set the position of the captions in the lightbox. Captions can also be overlaid on top of the content, or inline – outside of the content. The captions themselves are determined by the settings in the Captions tab of the gallery.

If you would prefer to not show captions, then you can set them to ‘Hidden’.

Auto Progress

The Auto Progress function allows your thumbnails to automatically scroll from one to the next. It is set to ‘No’ by default, so to enable this function you would need to select ‘Yes’.

Once enabled, you’ll see a field where you can set the number of seconds it will take to scroll to the next image.

FooGallery PRO Lightbox Auto Progress

Fit Media

You can force the image to fill the available content area by selecting ‘Yes’ under Fit Media. This will maintain the aspect ratio of the image, but scale it so that it fills the lightbox area. By default, this is set to not fit the media.

Displaying Controls

There are three settings that can change how the controls and scrollbars are displayed. The first one, Scroll Bars, allows you to display or hide the scroll bars in the lightbox.

Next, you can set the controls to be on top of, or outside the content area, by selecting ‘Overlaid’ or ‘Inline’ respectively.

Finally, you can change the controls to show only when you hover over the buttons by selecting ‘Yes’ under Show Controls On Hover.

FooGallery PRO Lightbox FAQ

Does the lightbox work with all of the gallery templates?

No. Some of the FooGallery templates don’t open images in a lightbox. This applies to both the Grid PRO gallery and the Slider PRO gallery. The Grid PRO settings will, however, allow you to customize the Panel, using the same settings as given for the gallery lightbox. The Slider PRO template allows for a similar customization in the general settings.

Will this lightbox replace FooBox?

No! FooBox and FooBox PRO will continue to exist as standalone lightboxes, that support both FooGallery and many other galleries. FooBox PRO also includes a number of features not available in the FooGallery PRO Lightbox, such as social sharing.

Can I still use the lightbox to display video?

Yes, the FooGallery PRO Lightbox works with videos. Simply add videos to your gallery as usual, and they will open in the lightbox.

What about deeplinking?

You can still use the deep linking function with the new lightbox. Deep linking in the gallery means that the URL captures both the paging and filtered state of the gallery. The lightbox however, also uses deep linking, allowing you to share specific images for the gallery.

To do this, simply scroll through the gallery to find the image you want to share. Copy the URL, which will be specific to this image. Then share!