Simple Touch-enabled Image Viewer Plugin with jQuery

A simplest jQuery image viewer plugin which allows you to display images in a responsive lightbox, with support for custom trigger/close events, retina images, and custom viewer open animations.

How to use it:

1. Load the jQuery library and the jQuery image viewer plugin in the document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="image-viewer.js"></script>

2. Call the plugin on the images and you're done.

$('img').imageViewer();

3. Customize the image viewer.

$('img').imageViewer({

/* Prepend this to CSS class names */
classPrefix: 'image-viewer',

/* Class to add to images when they're bound to the viewer */
boundClass: 'image-viewer-bound',

/* Events (on the source images) which trigger the viewer */
triggerEvents: 'click',

/* Non-exhaustive list of events which close the view */
closeEvents: 'click keydown keypress blur',

/* High-quality image URL generator (default: same as source image) */
hiResImageGenerator: identity,

/* Buttons are in container or dialog? */
buttonParent: 'container',

/* Called when an image is viewed */
onView: scrollImageIntoView

});

Change logs:

2015-09-02

• CSS bugfix

2015-08-21

• bugfix

2014-11-26

• Fixed background, no CSS left in the script

---

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