Image Lightbox & Gallery For jQuery - Lightbox2

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 the 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="/path/to/cdn/jquery.min.js"></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 with default values. Feel free to override the following options to customize the Image Lightbox & Gallery plugin.

lightbox.option({
  albumLabel: 'Image %1 of %2',
  alwaysShowNavOnTouchDevices: false,
  fadeDuration: 600,
  fitImagesInViewport: true,
  imageFadeDuration: 600,
  maxWidth: 800,
  maxHeight: 600,
  positionFromTop: 50,
  resizeDuration: 700,
  showImageNumberLabel: true,
  wrapAround: false, // If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set.
  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:

v2.11.4 (2023-02-22)

• Bugs fixed

v2.11.3 (2020-07-12)

• feat: When displaying SVGs, max out their size

v2.11.2 (2020-07-07)

• When displaying SVGs, max out their size

v2.11.1 (2019-07-15)

• Bugfix - MaxHeight wouldn't work. 
• fix: use max[Width|Height] when fitImagesInViewport is false.
• feature: Prevent Esc keypress from bubbling

v2.11.0 (2019-04-22)

• SVGs without width and height attrs incorrectly sized in IE11 and older Firefox.
• Remove alpha kbd aliases for closing and nav (x/c/o/n/p). Keep ESC and arrows.
• Disable Scrolling scrolls to top when image is clicked. 
• Adds empty alt text for placeholder image. 
• Add aria-labels to prev and next images. 
• Toggling visibility of elements on open/close revealing intentionally hidden elements.
• Caption links handlers doesn't trigger.
• Fixed images size when changing positionFromTop. 

2018-05-31

• JS+CSS+DEMO+DOC updated

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.