SiteOrigin Lightbox Gallery Widget
The SiteOrigin Lightbox Gallery widget creates flexible galleries in any layout. The lightbox can contain any Lightbox Component widget and supports transitions and overlays from the global list.
Layout the gallery with SiteOrigin.
Use images and other Lightbox Components.
Supports overlays and transitions from the global list.
Responsive full width and contained galleries.
Combines with other widgets.
Required Widgets
To create lightbox galleries you need to use two widgets. The Lightbox Gallery widget and the Lightbox Component - Image widget.
Lightbox Component - Image widgets are used inside the Lightbox Gallery widget. The Lightbox Gallery widget handles the layout of the gallery while the Lightbox Component - Image are the actual images.
As detailed further down Lightbox Component - Image widgets have their own set of modifiers. As well as Galleries Lightbox Component - Image widgets can be used inside any lightbox supported widget, such as Sliders and Filters.
Lightbox Gallery handles the layout of the gallery.
Lightbox Component - Image widgets are used inside the gallery.
Icon Template
The Lightbox Component - Image can have icons displayed on hover to better inform that the image can be clicked. Adding the icons on hover is handled by the Icon Template.
Image Scale Modifier
Adding the image scale modifier will zoom the image in slightly when hovered or focused. The scaling effect can be used with all available templates.
Overlay Template
Overlays are available in the Prime version of the Lightbox Component - Image widget. Overlays have access to all global Position and Transition modifier lists. Setting the template to Overlay enables the relevant modifiers in the Modifiers form section.
Transition & Position
When using the Overlay Template the relevant modifiers become available in the Modifiers form section. Overlay templates can use any of the global Transition modifiers and positioned with any Position and Position Size modifier.
Slider Combination
Combining the Lightbox Component - Image widget with the Slider widget creates slider based galleries. The Slider widget can Toggle Child Transitions on either hover or slide change.
Height Modifier
To prevent images from scaling relatively to their cell when using stretched grids Echelon allows for fixing the height of the Lightbox Component - Image. The Height modifier requires a background image be set for the parent Cell. Heights are taken from your global Height settings.
Filter Combination
Combining the Lightbox Component - Image widget with the Filter widget creates filterable galleries in grid and masonry layouts.
Looking for Ready to Use Gallery Examples?