Articles on: Nav-Filter-Sort

Lightbox

Lightboxes

Configure and Customize Grid Lightboxes

The Lightbox module allows you to display images, videos, and other media in a fullscreen overlay experience. Using the available settings, you can control gallery behavior, navigation, appearance, animations, and user interactions.

Table of Contents

  • Lightboxes and Essential Grid Gallery
  • Shown Media Orders
  • Lightbox Gallery
  • UI Colors
  • Title / Spacings
  • Effects
  • Auto Rotate
  • Slideshow
  • Toolbar Buttons

Lightboxes and Essential Grid

When an Essential Grid item is clicked, the most common behavior is for a lightbox to open containing extra media. A light box is a presentation container, typically filling the entire screen, that showcases content such as a video or a larger version of an image. For example:


There are several different ways a lightbox can be used in Essential Grid, and in this guide we’ll cover all of the related configuration options.


Note: All the options covered in this guide can be found in the Lightbox tab


Shown Media Orders

In the Shown Media Orders panel, the Set Source Order option determines what type of media will appear in a lightbox, such as images, videos, iframes etc.


The top most checked source item type determines that kind of media Essential Grid will look for to show in the lightbox. If a media item of that type is not found, the next checked source type in the stack will be looked for instead:

Through checking the source types you want, and sorting them into your order of preference, you can create a system of preferences and fallbacks for your lightbox media.
Note: If you check Post Content, all the other media types will be disabled, and a new Post Content panel will appear at the bottom of the page. We’ll cover that panel later in the article.

In the Lightbox Gallery panel you decide the way in which content will be displayed in the light box.


Use the Gallery Mode option to control what your lightbox shows, choosing from the following settings.


Let’s take a look at how each one of these settings make your lightbox function.


Single Mode

Clicking an item in the grid will open that item, and only that item, in a lightbox. To view any other item the lightbox has to be closed and another item clicked on.

All Items

Clicking an item will still open it in a lightbox, but from there it’s also be possible to directly navigate through all the other grid items without closing the lightbox.

Filter Based

The **Filter Based ** setting is similar to All Items, in that it allows direct navigation between multiple items. However it allows the collection of items shown to be reduced to match any filters the visitor may have applied to the grid.
If the grid is paginated, items from all pages will be shown as long as they match any currently applied filters.


Group Name

The Group Name option determines the text tag that gets attached to the end of the page’s URL when you open the lightbox.


Play Videos Auto

Set the Play Videos Auto option to On if you would like video play back to commence as soon as the lightbox is opened.


UI Colors

The UI Colors section allows you to control whether the Lightbox uses the default color scheme or a custom color configuration.


Override UI Colors

Use this setting to determine how the Lightbox interface colors are applied.

Use Default

Select Use Default to apply the system's default Lightbox color settings. This option is recommended if you want to maintain a consistent appearance across your gallery without making any color customizations.

Override

Select Override to enable custom color settings for the Lightbox interface. Once enabled, additional color customization options may become available, allowing you to modify the appearance of various Lightbox elements according to your branding and design requirements.


Overlay Color

Overlays the entire screen area, and sits behind the media and navigation UI.


UI Background Color

The background color of the navigation UI elements.


UI Color

The foreground color of the navigation UI elements.


UI Hover Background Color

The background color of the navigation UI elements when hovered over.


UI Hover Color

The foreground color of the navigation UI elements when hovered over.


Text Color

The color of any text included, such as that of titles and descriptions.



Title / Spacings

In the** Title / Spacings** panel you can configure titles, descriptions, and spacing around items:


Strip Tags

Set the Strip Tags option to On if you’d like to remove any HTML tags from an item’s title or description.


Position

If you are going to be displaying a title or description, use the Position option to control whether they appear at the top or bottom of the lightbox.


Show Title

If you’d like to display an item’s title set the Show Title option to On.


Title Source

The Title Source option appears only if Show Title is set to On, and is used to configure where the title comes from. You can select from the following settings.



Show Description

If you’d like to display an item’s description set the Show Description option to On.
escription Source
The Title Description option appears only if Show Description is set to On, and is used to configure where the description comes from. You can select from the following settings.


Grid Item – Description (for custom items)

This setting is intended for use only with custom grids. In this case an item’s description will be drawn from the Description option in its Item Data.

Filter Element

This option uses the item's assigned filter or category as the description. It is useful when you want visitors to quickly identify the category or group to which an item belongs.

Grid Item – Post Excerpt

This setting is intended for use with post content sources. In this case the description will be drawn from the post’s excerpt field.

Grid Item – Post Content

This setting is also intended for use with post content sources. In this case the description will be drawn from the post’s content, but will be limited to a maximum of 140 characters.



Item Margin

The Item Margin fields determine the space (in pixels) around the top, right, bottom and left of the lightbox, respectively.


Effects

In the Effects panel you can choose animations to use when the lightbox opens and closes, and when it moves to the next or previous item.


Open / Close Animation

The Open / Close Animation determines the way the lightbox will appear when a grid item is clicked on, and disappear when the lightbox is closed.
Select the animation you would like to use from the drop down field:


Then set the period of time you would like that animation to last, in milliseconds, in the Speed field:


Next / Prev Animation

The** Next / Prev Animation** controls the transition when paging between one item and the next.


The configuration process is the same as with the Open / Close Animation – select an animation and then set the speed you would like it to run at:


Auto Rotate

Auto Rotate

The Auto Rotate feature automatically cycles through the grid items in a slideshow-style presentation. When the Auto Rotate section is expanded, the following options become available:

  • Auto Rotate Mode
  • Auto Rotate Delays

Auto Rotate Mode

Set the Auto Rotate Mode option to On to automatically rotate through the grid items. Select Off to disable the auto-rotation feature.


Auto Rotate Delays

If using Auto Rotate Mode, use the Auto Rotate Delays option to enter the amount of time, in milliseconds, you’d like to elapse before progressing to the next item:


Slideshow

If you have Gallery Mode set to anything other than Single Mode, you can use the options in the Slideshow panel to help with navigating between items.


Navigation Arrows

Set Navigation Arrows to On to display navigation arrows a visitor can click to progress between items.


Loop Items

Set Loop Items to On to have the slideshow go back to the beginning after the last item.


Item Numbers

Set Item Numbers to On to display a count of the number of items in the slideshow, and which item is currently active.


Mouse Wheel

Set Mouse Wheel to On to allowed the user to navigate between items by scrolling their mouse.


Toolbar Buttons

In the Toolbar Buttons panel you can use the Set Button Order option to decide which buttons should appear in the toolbar at the top of the lightbox:


heck the box for each button you want to use, then drag and drop to sort them into the order you’d like them displayed. If all the buttons are active your toolbar will look something like this:

Toolbar Function:

Social Share

The Social Share button allows users to share the currently displayed image or gallery item on supported social media platforms. It helps increase content visibility and encourages audience engagement.


Thumbnails

The Thumbnails button displays small preview images of all gallery items, allowing users to quickly navigate to a specific image without scrolling through the entire gallery.


Close Button

The Close Button lets users exit the lightbox or gallery view and return to the page where the gallery is embedded.


Play / Pause

The Play / Pause button controls the gallery slideshow. Users can start automatic image transitions with Play and stop them at any time with Pause.


Zoom / Pan

The Zoom / Pan button allows users to enlarge an image and move around within it, making it easier to view fine details and high-resolution content.


Download Image

The Download Image button enables users to save the currently displayed image directly to their device for offline use.


Left Arrow

The Left Arrow button navigates to the previous image or media item in the gallery, allowing users to browse backward through the content.


Right Arrow

The Right Arrow button navigates to the next image or media item in the gallery, allowing users to browse forward through the content.




Updated on: 25/06/2026