Lightbox Overlays

Lightbox Overlay plugins determine how Omni Gallery displays a popup lightbox when gallery images are clicked.

Note that not all Display Widgets support showing a Lightbox Overlay when an image is clicked.

[ Omni Gallery ]

Lightbox Overlay Plugins

Omni Gallery can use a range of lightbox overlays to display images and supporting data.

Functionality can be extended by adding plugin classes for additional Lightbox Overlays. Lightbox Overlay plugins are simple classes that provide the functionality to display an image in an overlay with associated information. They should inherit from LighboxOverlayPluginBase. Details are provided by comments in the code.

[ Omni Gallery ]

Magnific

Use Magnific Popup provided with the concrete5 core.

Adapts Omni Gallery to use the Magnific Popup JavaScript popup/lightbox overlay.

Magnific Popup is a responsive lightbox overlay. It is bundled with the concrete5 core as the asset group core/lightbox

As with image display widgets, options are provided for selecting the element used to render the image, how it fills its container within the lightbox, the position and padding of the image and associated information text. Overlay background and text colour and transparency are fully configurable. In addition to being fully responsive, the lightbox can be disabled below a configurable screen size. Transitions can be applied when opening and closing the lightbox.

[ Omni Gallery ]

None

No lightbox.

Nice and simple, a lightbox popup is not loaded. Image links in display widgets simply go where the link says.

Select this plugin if you don't want the display widget to popup a lightbox when an image is clicked. Any links go wherever they point, such as another page, a URL, or straight to the image.

[ Omni Gallery ]

Vegas Background

The opposite of an overlay, show the image as a Vegas style background.

Adapts Omni Gallery to display an image as a background using the Vegas JavaScript widget.

The "lightbox" image is shown as a background to another block, area or to the entire page. As such, images are only rendered as background elements and there are no links, information overlay or navigation. The image is shown until another image is selected.

Vegas does a remarkably good job of hiding compression artefacts when upscaling images smaller than the display by using an overlay pattern.

Themes may set backgrounds and borders that prevent the Vegas images from showing. As a consequence, styles may be necessary to override theme backgrounds and/or borders with transparency. If only transparency is needed, this can be done within the edit dialog by listing selectors for application of transparent backgrounds and borders. If more complex opacity is required, styles should be provided by theme CSS or with header extra content attributes.

To lift text or other content from the background images, background colour, borders and padding should be added to blocks or areas using Block Design or Area Design.

[ Omni Gallery Elements ]

Magnific Element

Use Magnific Popup to display a selected element

An adaptation of the Magnific Lightbox Overlay where the overlay is rendered using a concrete5 element.

Magnific Popup is a responsive lightbox overlay. It is bundled with the concrete5 core as the asset group core/lightbox

Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Magnific Element display.

[ Omni Gallery Elements ]

Magnific Element Boxed

Use Magnific Popup to display a selected element in a box

The Magnific Element display widget is extended to render each element into a sized box.

An adaptation of the Magnific Lightbox Overlay where the overlay is rendered using a concrete5 element.

Magnific Popup is a responsive lightbox overlay. It is bundled with the concrete5 core as the asset group core/lightbox

Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Magnific Element Boxed display.