Image Lightbox & Gallery For jQuery - Lightbox2

Image Lightbox & Gallery For jQuery - Lightbox2
File Size: 223 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Lightbox2 is a simple and useful script which can be used to overlay your images or photos on top of the current web page. 

It also can be used as an Image Gallery or a Slideshow that the users are able to switch between images in a same group.

Dead simple to use and without the need of writing any JS code.

How to use it:

1. Add jQuery JavaScript library and the Lightbox2 plugin's JavaScript & CSS to your html page.

<link rel="stylesheet" href="dist/css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="dist/js/lightbox.js"></script>

2. Create a basic lightbox for images using the data-lightbox attribute.

<a class="demo" href="1.jpg" data-lightbox="example-1">
  <img class="example-image" src="thumb-1.jpg" alt="image-1">
</a>

<a class="demo" href="2.jpg" data-lightbox="example-2">
  <img class="example-image" src="thumb-2.jpg" alt="image-2">
</a>

3. Sometimes you might need to display the image caption in the lightbox. The plugin enables you to add custom image captions using the data-title attribute:

<a class="demo" href="3.jpg" data-lightbox="example-3" data-title="Caption">
  <img class="example-image" src="thumb-3.jpg" alt="image-3">
</a>

4. To create a gallery lightbox, just make the data-lightbox attribute has the same value as these:

<a class="demo" href="1.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-1.jpg" alt="image-1">
</a>

<a class="demo" href="2.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-2.jpg" alt="image-2">
</a>

<a class="demo" href="3.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-3.jpg" alt="image-3">
</a>

<a class="demo" href="4.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-4.jpg" alt="image-4">
</a>

<a class="demo" href="5.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-5.jpg" alt="image-5">
</a>

...

5. Possible options to customize the Image Lightbox & Gallery plugin.

{
  albumLabel: 'Image %1 of %2',
  alwaysShowNavOnTouchDevices: false,
  fadeDuration: 600,
  fitImagesInViewport: true,
  imageFadeDuration: 600,
  positionFromTop: 50,
  resizeDuration: 700,
  showImageNumberLabel: true,
  wrapAround: false,
  disableScrolling: false,
  /*
  Sanitize Title
  If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
  This will free you to add html tags, such as links, in the caption.

  If the caption data is user submitted or from some other untrusted source, then set this to true
  to prevent xss and other injection attacks.
   */
  sanitizeTitle: false
}

Changelog:

2018-05-31

  • JS+CSS+DEMO+DOC updated

This awesome jQuery plugin is developed by lokesh. For more Advanced Usages, please check the demo page or visit the official website.