Galleries

Galleries is a simple, elegant solution to creating single or multiple image galleries in your page. Galleries only requests each external image once which means you aren't loading the large images again and again as you click between thumbnails/links making transitions instant.

Getting Started

To get started, you need to first include the plugin on your page, preferably at the bottom AND after the jQuery include. Just so non-JS users aren’t left out in the dark, it’s best to call the plugin on anchor tags with the href referencing the external image like so:

<a class="thumbnail" href="/path/to/zoomed-image.jpg" data-stage=".any-valid-selector">
  <img src="/path/to/thumbnail.jpg" />
</a>
// This is the bare minumum required to get up and running

$('.thumbnail-link').gallery();

Because data-stage accepts a valid selector, you can target your stage virtually anyway you want eg:

.class
#id
[attribute=gallery]
.parent #child
.parent .parent #child // and so on

Posted: