Easy Image Lightbox With Slider Integration – Lightbox.js

Category: Gallery , Javascript , Modal & Popup | December 13, 2016
Views Total:6,392 views
Official Page:Go to website
Last Update:December 13, 2016


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.


  • 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 href="2.jpg" class="lightbox" title="">
  <img src="thumb-2.jpg" alt="Thumbnail 2">
<a href="3.jpg" class="lightbox" title="">
  <img src="thumb-3.jpg" alt="Thumbnail 1">

Initialize the lightbox as this:


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

// 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

You Might Be Interested In:

One thought on “Easy Image Lightbox With Slider Integration – Lightbox.js

  1. Nick Hall

    Close on Click outside the image does not work… please fix! this is awesome apart from this.


Leave a Reply