Lightbox

Showcase your images in striking lightbox galleries, allowing for immersive viewing with options to customize overlay color, opacity, and navigation controls.

  • Image Widget
  • Image Grid Widget
  • Simple Masonry Widget
  • Slider Widget

View the Lightbox Addon demo.

Requirements

To make use of this addon, go to PluginsSiteOrigin Widgets and ensure the SiteOrigin Image, SiteOrigin Image Grid, SiteOrigin Simple Masonry and SiteOrigin Slider Widgets are activated, assuming you’d like to use them all. Next, go to SiteOriginPremium Addons and activate the Lightbox Addon.

Usage

Within each of the above widgets you’ll find the following options:

Enable Lightbox
Enabling this checkbox will override the destination URL set for the image in the widget and open the image in a lightbox when the image is clicked.

Album Name
To include your lightbox images in a single gallery on the page, insert an album name. Images with the same album name will be displayed together.

Global Settings

Global settings for the Lightbox Addon can be found at SiteOriginPremium AddonsLightboxSettings. Global settings apply to all lightboxes. The following options are available:

Always Show Navigation Controls on Touch Devices
Enable to show navigation controls on touch devices, thereby not only relying on swipe actions.

Disable on Tablet
Disable all lightboxes on tablet devices. Tablet width is set at SettingsPage BuilderLayout.

Disable on Mobile
Disable all lightboxes on mobile devices. Mobile width is set at SettingsPage BuilderLayout.

Disable Page Scrolling When the Lightbox Is Open
Enable to prevent the page from being scrollable when the lightbox is open.

Overlay Color
The background color of the lightbox overlay. Defaults to black, #000.

Overlay Opacity
The opacity of the lightbox overlay. Defaults to 0.8.

Fade Duration
Time, in milliseconds, for the lightbox container and overlay to fade in/out. Defaults to 600.

Fit Images in Viewport
Resize images that are too large to fit in the current viewport.

Image Fade Duration
Time, in milliseconds, for an image to fade in, once loaded. Defaults to 600.

Max Image Height in Pixels
Optionally set the maximum height for all lightbox images.

Max Image Width in Pixels
Optionally set the maximum width for all lightbox images.

Top Offset
Position, in pixels, of the lightbox from the top of the viewport. Defaults to 50.

Resize Duration
The time it takes for the lightbox container to animate its width and height when transitioning between different size images, in milliseconds. Defaults to 700.

Show Image Number Label
Show text indicating the current image number and the total number of images in the set.

Disable captions for all lightboxes
Prevent image captions from displaying in all lightboxes.

Wrap Around
Go back to the first image when the last image is reached.