LightboxPRO
Provide users with the option to view an image full screen, with powerful options. Powered by Photoswipe.
Optional plugin
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.
Any <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 .lightbox
individually.
<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>
JavaScript behavior
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:
<div id="solid-lightbox-init"></div>
Options, methods & events
For the full list of options, methods and events related to this plugin, visit the Flatpickr documentation.