Easy Image Lightbox With Slider Integration – Lightbox.js

Lightbox.js is a dependency-free JavaScript lightbox library which provides you an elegant way to view large images.

Features:

• Clicking on the thumbnail will show all the grouped images in a gallery lightbox.
• Auto generates zoom icons to the thumbnails.
• Allows to slide through images via navigation arrows and keyboard arrows.
• Image loader.
• Responsive design and touch-friendly.

How to use it:

Load the core style sheet lightbox.css in the header and the JavaScript file lightbox.js right before the closing body tag.

<link href="dist/lightbox.css" rel="stylesheet">
<script src="dist/lightbox.js"></script>

Wrap you thumbnails into a links pointing to the large images.

<a href="1.jpg" class="lightbox" title="">
  <img src="thumb-1.jpg" alt="Thumbnail 1">
</a>
<a href="2.jpg" class="lightbox" title="">
  <img src="thumb-2.jpg" alt="Thumbnail 2">
</a>
<a href="3.jpg" class="lightbox" title="">
  <img src="thumb-3.jpg" alt="Thumbnail 1">
</a>

Initialize the lightbox as this:

lightbox('.lightbox');

To customize the lightbox, just pass the option object as the second parameter to the lightbox function.

lightbox('.lightbox',{
// Display captions, if available.
captions: true,
// Set the element where the caption is. Set it to "self" for the a-tag itself
captionsSelector: "self",
// Get the caption from given attribute.
captionAttribute: "title",
// Display navigation buttons. "auto" hides buttons on touch-enabled devices.
nav: "auto",
// Text or HTML for the navigation buttons.
navText: ["‹", "›"],
// Display close button.
close: true,
// Text or HTML for the close button.
closeText: "×",
// Display current image index
counter: true,
// Allow keyboard navigation.
keyboard: true,
// Display zoom icon.
zoom: true,
// Text or HTML for the zoom icon
zoomText: "+",
// Closes the lightbox when clicking outside
docClose: false,
// Swipe up to close lightbox
swipeClose: true,
// Hide scrollbars if lightbox is displayed.
scroll: false
});