Easy Image Lightbox With Slider Integration – Lightbox.js

Category: Gallery , Javascript , Modal & Popup , Recommended | December 13, 2016
Author: DxF5H
Views Total: 1,669
Official Page: Go to website
Last Update: December 13, 2016
License: MIT

Preview:

Easy Image Lightbox With Slider Integration – Lightbox.js

Description:

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
});
  • Nick Hall

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