[heading size=”h2″ style=”uk-module-title”]Lightbox[/heading]
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.
[line_break/] [heading size=”h3″ style=”uk-module-title uk-margin-bottom”]Toggle lightbox from button[/heading] [lightbox src=”images/demo/gallery/2.jpg” title=”Blown away” group=”porfolio1″ style=”uk-button”]View image[/lightbox][line_break/][line_break/]
[badge style=”note uk-margin-top”]markup[/badge]
[code][lightbox src=”images/demo/gallery/2.jpg” title=”Title” group=”” style=”uk-button”]View image[/lightbox][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Using the lightbox in a gallery[/heading][line_break/] [grid] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Blown away” group=”gallery1″ style=””]
[/lightbox] [/column] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Spectacular” group=”gallery1″ style=””][/lightbox] [/column] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Unlock the door” group=”gallery1″ style=””][/lightbox] [/column] [/grid][line_break/] [toggle_code open=”false” title=”Show code”] [grid] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”title” group=”group name” style=””]<img src=”images/demo/gallery/2.jpg” width=”605″ height=”605″ alt=”image”>[/lightbox] [/column] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”title” group=”group name” style=””]<img src=”images/demo/gallery/2.jpg” width=”605″ height=”605″ alt=”image”>[/lightbox] [/column] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”title” group=”group name” style=””]<img src=”images/demo/gallery/2.jpg” width=”605″ height=”605″ alt=”image”>[/lightbox] [/column] [/grid] [/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Adding an overlay[/heading]
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.
[line_break/]
| 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 |
[line_break/]
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 |
[line_break/] [grid] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Blown away” group=”gallery2″ style=””] [overlay_icon] [image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” alt=”image” width=”605″ height=”605″/] [/overlay_icon] [/lightbox] [/column] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Spectacular” group=”gallery2″ style=””] [overlay_panel animation=”slide-top” style=”” caption=”Good things happen to those who work” position=”top”] [image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” alt=”image” width=”605″ height=”605″/] [/overlay_panel] [/lightbox] [/column] [column size=”1-4″] [lightbox src=”images/demo/gallery/2.jpg” title=”Unlock the door” group=”gallery2″ style=””] [overlay_panel animation=”slide-bottom” style=”” caption=”Good things happen to those who work” position=”bottom”] [image style=”uk-thumbnail uk-overlay-scale” src=”images/demo/gallery/2.jpg” alt=”image” width=”605″ height=”605″/] [/overlay_panel] [/lightbox] [/column] [/grid][line_break/] [toggle_code open=”false” title=”Show code”] [grid] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”Blown away” group=”gallery2″ style=””] [overlay_icon] [image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” title=”image” width=”605″ height=”605″/] [/overlay_icon] [/lightbox] [/column] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”Spectacular” group=”gallery2″ style=””] [overlay_panel animation=”slide-top” style=”” caption=”Good things happen to those who work” position=”top”] [image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” title=”image” width=”605″ height=”605″/] [/overlay_panel] [/lightbox] [/column] [column size=”1-3″] [lightbox src=”images/demo/gallery/2.jpg” title=”Unlock the door” group=”gallery2″ style=””] [overlay_panel animation=”slide-bottom” style=”” caption=”Good things happen to those who work” position=”bottom”] [image style=”uk-thumbnail uk-overlay-scale” src=”images/demo/gallery/2.jpg” title=”image” width=”605″ height=”605″/] [/overlay_panel] [/lightbox] [/column] [/grid] [/toggle_code]
