• 8:00 am to 10:00 pm

Talk to us now

+49 555 000 000

Visit our offices

Mirage Plaza - Hamburg

Send us an email

hello@sandal.com

We are open all day

8:00 am to 10:00 pm daily

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]
logo

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing

+49 555 000 000
hello@sandal.com
support@sandal.com

Recent Posts

Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Theme by arrowthemes