Responsive Accessible Lightbox Gallery Plugin For jQuery - littlelightbox

littlelightbox is a simple, flexible, responsive jQuery gallery lightbox plugin that helps you create image galleries with lightbox integration. Your users are able to scroll through all the enlarged images in a lightbox popup with navigation arrows and keyboard interactions.

How to use it:

1. Download the plugin and then include the jquery.littlelightbox.css and jquery.littlelightbox.js on the html page which has jQuery library loaded.

<link href="jquery.littlelightbox.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.littlelightbox.js"></script>

2. Create a group of images to be presented in the gallery lightbox.

<a class="lightbox" href="1.jpg" 
   data-littlelightbox-group="gallery">
   <img src="1.jpg">
</a>

<a class="lightbox" href="2.jpg" 
   data-littlelightbox-group="gallery">
   <img src="2.jpg">
</a>

<a class="lightbox" href="3.jpg" 
   data-littlelightbox-group="gallery">
   <img src="3.jpg">
</a>

...

3. Initialize the gallery lightbox with default options.

$('.lightbox').littleLightBox();

4. Config the plugin with the following options.

helpers: {

},

tpl: {
  wrap: '<div class="lightbox-wrap"><div class="lightbox-skin"><div class="lightbox-outer"><div class="lightbox-inner" style="overflow: hidden;"></div></div></div></div>',
  img: '<img class="lightbox-image" src="{href}" style="width:100%;height:100%;"/>',
  loading: '<div class="lightbox-loading"><div></div></div>',
  closeBtn: '<div class="lightbox-closeBtn"></div>',
  prevBtn: '<div class="lightbox-prevBtn lightbox-nav"><span></span></div>',
  nextBtn: '<div class="lightbox-nextBtn lightbox-nav"><span></span></div>',
},
padding: 15,
minWidth: 200,
minHeight: 200,
maxWidth: 9999,
maxHeight: 9999,
wrapRatio: 0.8,
top: 0.5,
left: 0.5,
loop: false,

// animation options
openMethod: 'fadeIn', // 'changeIn','fadeIn', 'elasticIn'
openDirect: 'down', // 'changeIn', 'down', 'up', 'left', 'right' is avaliable.
openSpeed: 400,
distance: 200,
closeMethod: 'fadeOut',
closeDirect: 'up',
closeDistance: 'hide',
closeSpeed: 400,
prevMethod: 'changeOut',
nextMethod: 'changeIn',
changeSpeed: 600,

direction: {
  next: 'left',
  prev: 'right'
},

// key settings
keys: {
  close: [27, 46], // esc key & delete key
  next: {
    13: 'left', // enter key
    39: 'left', // right arrow
    68: 'left', // D key
    40: 'up',   // down arrow
    34: 'up',   // pgdn key
    83: 'up',   // S key
  },
  prev: {
    8: 'right',  // backspace key
    37: 'right', // left arrow
    65: 'right', // A key
    38: 'down',  // up arrow
    33: 'down',  // pgup key
    87: 'down',  // W key
  },
},

---

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