school and education

Pišite nam

 Ova e-mail adresa je zaštićena od spambota. Potrebno je omogućiti JavaScript da je vidite.

Shortcodes

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

markup

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

Using the lightbox in a gallery


image
image
image

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]

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


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]

Talk to us

085 888 5555