LightboxPRO

Provide users with the option to view an image full screen, with powerful options. Powered by Photoswipe.

Optional plugin

As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.

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.

Read more

Input groups List groups