gallery.js

A backbone app for a full width masonry gallery.

Install

Install via bower:

bower install gallery.js

Or get the latest script and stylesheet files from the repo.

Development

• Clone Repo
• Install dependencies:
  • npm install
  • bower install
• For development: npm run dev
• For building the example gallery into a dist folder: npm run build

Integrate

HTML

Hava a look at index.html inside the Gallery-App comments for the HTML markup needed for gallery.js.

JS

Inizialize the gallery in your main.js:

new GalleryApp({
    el: $('.gallery-app'),
    layout: 'masonry',
    galleryOpts: {},
    selectionOpts: {},
    onInit: function(app, model) {}
});

The gallery can be configured in the markup via data attributes of the gallery element el. Additionally you can override these settings with the options given to the GalleryApp constructor along the el:

el: DOM element with the following options for the gallery:

• data-gal-src: defines where to take the images from. 2 possibilities:
  • a url (relative or absolute) to a gallery-json (example)
  • selection:<selection-key> for a SelectionGalleryModel, which takes its images from a selection specified by the given <selection-key>.
• data-gal-opts: stringified JSON options for the gallery model. These can be overridden by galleryOpts.
• data-gal-layout: layout to use in the ThumbContainer. Can be overriden by layout.
• data-gal-selection: key for the Selection to use by the Gallery, or empty string for no selection.
• data-gal-selection-opts: stringified JSON options for the selection collection. These can be overriden by selectionOpts.

layout: 'masonry' is the default layout. With 'none', the thumbs are rendered into the dom without any masonry frills.

galleryOpts: options for the gallery model (see GalleryModel for details).

selectionOpts: options for the selection collection (see SelectionCollection for details).

onInit is called, when the gallery data is fetched. It gets 2 params:

• the GalleryApp object, a backbone view representing the whole application and
• the GalleryModel object, a backbone model representing the Gallery data.

Addons

In the onInit callback you can hook your own addons - components, that interact with the gallery, via the GalleryApp object. In the addons directory you can find examples for that.

Example Gallery

The Images are flyers for the gutfeeling crew by the famous giftwrapping-doctor Sascha Schwegeler.