jQuery Image Gallery Lightbox Plugin - jQuery Impromptu Gallery

Just another jQuery gallery lightbox plugin which displays a series of images in a modal window with next/prev controls. Relies on jQuery and jQuery Impromptu, an extention to help provide a more pleasant way to spontaneously prompt a user for input.

How to use it:

1. Include jQuery library and the jQuery Impromptu plugin in the document.

<link rel="stylesheet" href="jquery-impromptu.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-impromptu.js"></script>

2. Create a gallery of images on your web page as follow.

<a href="large-1.jpg" target="_blank" class="impromptu-gallery"><img src="thumb-1.jpg"></a>
<a href="large-2.jpg" target="_blank" class="impromptu-gallery"><img src="thumb-2.jpg"></a>
<a href="large-3.jpg" target="_blank" class="impromptu-gallery"><img src="thumb-3.jpg"></a>

3. Setup the gallery lightbox.

var impromptu_gallery = $('.impromptu-gallery');
var impromptu_defaults = {
  classes: {
  prompt: 'jqi2' // the new class for the impromptu prompt div
  },
  promptspeed: 0, // doesn't slide between states
  persistent: false // the overlay closes when cliked
};

4. Build all the states dinamically

var states = {};
var len = impromptu_gallery.length - 1;
impromptu_gallery.each(function(i, el) {
var el = $(el);
var url = el.attr('href');
var newstate = {};
newstate['state' + i] = {
  html: '<img src="' + url + '" />',
  buttons: {
    'Prev': false,
    'Next': true
  },
  focus: 1,
  submit:function(e, v, m, f) {
    e.preventDefault();

    if (v) {
      if (i != len) {
        jQuery.prompt.nextState();
      } else {
        $.prompt.goToState('state0');
      } else {
        if (i > 0) {
          jQuery.prompt.prevState();
        } else {
          $.prompt.goToState('state' + len);
        }
      }
    }
  };
states = $.extend({}, states, newstate);
});

5. Overide the default click event

impromptu_gallery.each(function(i, el) {
var el = $(el);
el.off('click').on('click', function(e) {
  var stateName = 'state' + i;
  $.prompt(states, $.extend({}, impromptu_defaults, {
  loaded: function() {
    jQuery.prompt.goToState(stateName);
  }
}));

e.preventDefault();
});
});

---

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