Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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.
JavaScript CSS
tree: 54979781e9

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
application.js
index.html
jquery.image-gallery.css
jquery.image-gallery.js
jquery.image-gallery.min.js
loading.gif
style.css

README.md

jQuery Image Gallery Plugin

Demo

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 matching a selector, now or in the future, of the given set of root elements:

$('#gallery').imagegallery();

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

$('#gallery').imagegallery({
    // 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: [
        'blind',
        'clip',
        'drop',
        'explode',
        'fade',
        'fold',
        'puff',
        'slide',
        'scale'
    ],
    // 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:

$('#gallery').imagegallery('disable');
$('#gallery').imagegallery('enable');
$('#gallery').imagegallery('destroy');

Requirements

License

Released under the MIT license.

Source Code & Download

Something went wrong with that request. Please try again.