The Image Gallery plugin makes use of jQuery's delegate method to attach a click event handler for all child elements of a container:
$('#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[data-gallery="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');- jQuery v. 1.6+
- jQuery UI v. 1.8+ (Required: Widget, Dialog)
- JavaScript Load Image v. 1.1.4+
Released under the MIT license.