Lightbox

Setting up Lightboxes:

Adding a data-lightbox attribute to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image

data-lightbox="image"

<a href="link-to-lightbox-image.jpg" data-lightbox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Iframe

data-lightbox="iframe"

<a href="http://yourwebsite.com" data-lightbox="iframe">Your Website in a Lightbox</a>

Video

data-lightbox="iframe"

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

<a href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>

AJAX

data-lightbox="ajax"

Note: It is recommended that you use the .portfolio-ajax-modal Class to wrap your AJAX Content to get it displayed properly. You can also design your AJAX Content in any way using your own Custom CSS.

<a href="link-to-ajax-content.html" data-lightbox="ajax">AJAX Content in a Lightbox</a>

Showing Lightbox Captions:

To show Captions for your Lightbox Images you will need to add the title Attribute for your Lightbox Links:

<a href="link-to-lightbox-image.jpg" data-lightbox="image" title="Lightbox Image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Last Modified: February 7, 2020