Lightbox

Use the [lighbox] shortcode to show a popup box with an image. The lightbox utilizes the modal component to load images and videos to fit the entire modal box. You can configure the lightbox images to scroll through a gallery by setting the group parameter.

Toggle lightbox from button

View image

[lightbox src="/images/demo/gallery/2.jpg" title="Title" group="" style="uk-button"]View image[/lightbox]

Using the lightbox in a gallery

Adding an overlay

To add an overlay icon to an image, use the [overlay_icon] shortcode

. The [overlay_panel] shortcode can be used to place an overlay panel that appears on hover. The position parameter crops and places the overlay panel to one side.

animation	Description
slide-top	slide the overlay panel in from the top
slide-bottom	slide the overlay panel in from the bottom
slide-left	slide the overlay panel in from the left
slide-right	slide the overlay panel in from the right
fade	fade in the overlay panel

The following positions can be used with the [overlay_panel] shortcode.

position	Description
top	align the overlay panel to the top
bottom	align the overlay panel to the bottom
left	align the overlay panel to the left
right	align the overlay panel to the right