Lighweight jQuery Based Image Lightbox Plugin

A very simple & cross-device jQuery lightbox plugin for displaying large images in a full window, responsive modal popup, with image preload support.

Basic usage:

1. Include the latest jQuery library and the lightbox.min.js script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

2. Add a link to your thumbnail that points to the larger version of the image.

<div id="gallery">

<a href="large-1.jpg">
  <img src="thumb-1.jpg" alt="Image Description">
</a>

<a href="large-2.jpg">
  <img src="thumb-2.jpg" alt="Image Description">
</a>

<a href="large-3.jpg">
  <img src="thumb-3.jpg" alt="Image Description">
</a>

</div>

3. Add the large image to the image preload list

var imgs = ['large-1.jpg', 'large-2.jpg', 'large-3.jpg'];

4. Initialize the plugin by calling the plugin on parent container and enable the image preload on page load.

$(window).on('load', function () {
  $(document.getElementById('gallery')).lightbox({preload: imgs});
});

5. Default configurations.

$fn.lightbox({

// image preload list
preload: [],

// animation speed
speed: 400,

// opacity. 0-1
opacity: .7,

// animation type
animation: 'linear'

})

---

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