jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.
Pull request Compare This branch is 22 commits behind blueimp:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Image Gallery Plugin


jQuery Image Gallery Demo

Description & Usage

The Image Gallery plugin makes use of jQuery's delegate method to attach a click event handler for all child elements of a container:


It is possible to override the default selector as well as a number of additional gallery options:

    // selector given to jQuery's delegate method:
    selector: 'a[rel="gallery"]',
    // event handler namespace:
    namespace: 'imagegallery',
    // Shows the next image after the given time in ms (0 = disabled):
    slideshow: 0,
    // Offset of image width to viewport width:
    offsetWidth: 100,
    // Offset of image height to viewport height:
    offsetHeight: 100,
    // Display images fullscreen (overrides offsets):
    fullscreen: false,
    // Display images as canvas elements:
    canvas: false,
    // body class added on dialog display:
    bodyClass: 'gallery-body',
    // element id of the loading animation:
    loaderId: 'gallery-loader',
    // list of available dialog effects,
    // used when show/hide is set to "random":
    effects: [
    // The following are jQuery UI dialog options, see
    // http://jqueryui.com/demos/dialog/#options
    // for additional options and documentation:
    modal: true,
    resizable: false,
    width: 'auto',
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    dialogClass: 'gallery-dialog'

The click handler opens the linked images in a jQuery UI dialog. The options object given to the imagegallery method is passed to the jQuery UI dialog initialization and allows to override any dialog options.

It is possible to change options after widget initialization:

$('#gallery').imagegallery('option', 'fullscreen', true);
$('#gallery').imagegallery('option', {
    show: 'slide',
    hide: 'slide'

The Image Gallery widget can also be disabled/enabled/destroyed:




Released under the MIT license.