Easy Touchable jQuery Image Lightbox Gallery Plugin - Litbx

Litbx is a lightweight, easy-to-use and touch-enabled jQuery lightbox plugin which enables you display singe or grouped image(s) in a fullscreen responsive lightbox popup.

How to use it:

1. Load the core stylesheet litbx.core.css in the head section of the web page.

<link rel="stylesheet" href="litbx.core.css">

2. Load jQuery library and the jQuery litbox plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="litbx.js"></script>

3. Create a single image lightbox.

<a class="litbx" href="large.jpg">
  <img src="thumb.jpg">
</a>

4. Create a lightbox gallery from a list of images grouped by data-group attribute.

<a class="litbx" href="large-1.jpg" data-group="gallery">
  <img src="thumb-1.jpg">
</a>

<a class="litbx" href="large-2.jpg" data-group="gallery">
  <img src="thumb-2.jpg">
</a>

<a class="litbx" href="large-3.jpg" data-group="gallery">
  <img src="thumb-3.jpg">
</a>

5. Initialize the plugin.

$(".litbx").litbx();

6. Available options with default values.

padding: 50,
margin: 70,  // [30, 55, 30, 55]
arrows: true,  // not in use
closeBtn: true,  // not in use
startAt: 0, // int - index starts at 1, 0 or false = open at trigger
flexbox: false, // not in use

// Dimensions
width: 900,
height: 1200,
minWidth: 100,  // not in use
minHeight: 100,  // not in use
maxWidth: 1600,
maxHeight: 1600,
aspectRatio: true,  // not in use
fitToView: true,  // not in use

// Events
closeClick: false,
preload: true,
loop: true,
keyboard: true,
closeKey: [32, 27],
nextKey: [39],
prevKey: [37],
throttle: 16,

// Classes
classes: {
  //base: 'litbx', // not in use
  overlay: 'litbx__overlay',
  wrapper: 'litbx__wrapper',
  inner: 'litbx__inner',
  item: 'litbx__item',
  arrow: 'litbx__arrow',
  arrowNext: 'litbx__arrow--next',
  arrowPrev: 'litbx__arrow--prev',
  close: 'litbx__close',
  current: 'current',
  loading: 'loading',
  locked: 'locked',
  title: 'litbx__title',
},

// Title
title: true,

// Templates - can't use classes dynamicly here and there is also redundancy
tpl: {
  overlay: '<div class="litbx__overlay"></div>',
  wrap: '<div class="litbx__wrapper"></div>',
  inner: '<div class="litbx__inner"></div>',
  //error    : '<p class="fancybox-error">{{ERROR}}</p>',
  //closeBtn : '<a title="{{CLOSE}}" class="fancybox-close" href="javascript:;"></a>',
  close: '<span title="Close" class="litbx__close">x</span>',
  next: '<span class="litbx__arrow litbx__arrow--prev"><i class="prev">&larr;</i></span>',
  prev: '<span class="litbx__arrow litbx__arrow--next"><i class="next">&rarr;</i></span>',
  title: '<span class="litbx__title"></span>'
},

// Styling
helperStyle: true,

// Callbacks
beforeInit: function() {},
afterInit: function() {},

Change log:

2015-10-19

• Add close button, prevent scroll, asign custom keyboard buttons

2015-09-07

• Fix calculation function, improve style

2015-09-01

• Improve event handling, add lightbox for single image

---

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