Provide users with the option to view an image full screen, with powerful options. Powered by Photoswipe.
Lightboxes work by defining an
<a> element that links to a large image, with an
<img> element inside as a thumbnail.
data-size has to be defined with the image’s resolution (width x height) in order for the plugin to properly work.
<a> inside a
.lightbox wrapper element will be seen as part of the lightbox, allowing users to navigate through all images once one image has been enlarged. Separate images by wrapping them in a
<div class="row lightbox"> <figure class="col-4"> <a href="/solid/img/demo-article-1.jpg" data-size="800x534"> <img class="img-fluid" src="/solid/img/demo-article-1.jpg"> </a> </figure> <figure class="col-4"> <a href="/solid/img/demo-article-2.jpg" data-size="800x534"> <img class="img-fluid" src="/solid/img/demo-article-2.jpg"> </a> </figure> <figure class="col-4"> <a href="/solid/img/demo-article-3.jpg" data-size="800x534"> <img class="img-fluid" src="/solid/img/demo-article-3.jpg"> </a> </figure> </div>
Lightboxes initialized from the
.lightbox wrapper are initialized with a default set of options. Custom options are possible by defining your own wrapper and writing custom code for this. The default UI and options are initialized by adding the following element to your page:
Options, methods & events
For the full list of options, methods and events related to this plugin, visit the Flatpickr documentation.