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:
data-lightbox="image"
<a href="link-to-lightbox-image.jpg" data-lightbox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>data-lightbox="iframe"
<a href="http://yourwebsite.com" data-lightbox="iframe">Your Website in a Lightbox</a>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>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>data-lightbox="gallery"data-lightbox="gallery-item"
<div data-lightbox="gallery">
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>data-lightbox="gallery"data-lightbox="gallery-item"
<div data-lightbox="gallery">
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="http://www.youtube.com/watch?v=kuceVNBTJio" class="mfp-iframe" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>data-lightbox="ajax-gallery"data-lightbox="ajax-gallery-item"
<div data-lightbox="ajax-gallery">
<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
</div>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