Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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.
tree: 8bddcef9ab

Fetching latest commit…

Cannot retrieve the latest commit at this time

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

README.md

jQuery Image Gallery Plugin

Demo

jQuery Image Gallery

Description & Usage

The Image Gallery plugin makes use of jQuery's live method to attach a click handler to all elements that match the selector of the given jQuery collection, now and in the future:

$('a[rel=gallery]').imagegallery();

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 set any dialog options:

$('a[rel=gallery]').imagegallery({
    open: function (event, ui) {/* called on dialogopen */},
    title: 'Image Gallery', // Sets the dialog title
    show: 'scale', // The effect to be used when the dialog is opened
    hide: 'explode', // The effect to be used when the dialog is closed
    offsetWidth: 50, // Offset of image width to viewport width
    offsetHeight: 50, // Offset of image height to viewport height
    slideshow: 5000, // Shows the next image after 5000 ms
    fullscreen: true, // Displays images fullscreen (overrides offsets)
    canvas: true, // Displays images as canvas elements
    namespace: 'myimagegallery' // event handler namespace
});

offsetWidth, offsetHeight, slideshow, fullscreen, canvas and namespace are imagegallery specific options, while open, title, show and hide are jQuery UI dialog options.

The click event listeners can be removed by calling the imagegallery method with "destroy" as first argument, using the same selector for the jQuery collection and the same namespace:

$('a[rel=gallery]').imagegallery('destroy', {namespace: 'ns'});

To directly open an image with gallery functionality, the imagegallery method can be called with "open" as first argument:

$('a:last').imagegallery('open', {selector: 'a[rel=gallery]'});

The selector for related images can be overriden with the "selector" option.

Requirements

License

Released under the MIT license.

Source Code & Download

Something went wrong with that request. Please try again.