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: grunt serve
• For building the example gallery into a dist folder: grunt 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'),
    galleryOpts: {},
    onInit: function(app, model) {}
});

el: DOM element with options for the gallery (see index.html for details).

galleryOpts: options for the gallery model (see gallery.model.js 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 including the ImageCollection.

Example Gallery

The Images are flyers for the gutfeeling collective by the famous giftwrapping-doctor Sascha Schwegler.