Image gallery with mobile/touch support and no dependencies.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
test
.eslintrc.json
.gitignore
.travis.yml
LICENSE
README.md
bower.json
glry.js
karma.conf.js
package.json

README.md

glry

Build Status Test Coverage

Image gallery with mobile/touch support and no dependencies.

See the demo

Does not require you to specify all the images in the markup beforehand, instead you supply a load function which returns the next/prev image. This makes it ideal for large or dynamic galleries, where the images should be loaded based on changing logic.

glry is also used as a base for daily-glry, which is an extension specifically designed for daily comic strips.

Install

With npm:

$ npm install glry --save

or bower:

$ bower install glry --save

Include the library in your web page:

<script src="bower_components/glry/glry.js"></script>

Usage

Place some basic HTML on your page:

<figure id="figure">
    <div class="loading">LOADING</div>
    <div class="error">ERROR</div>
    <nav class="navigation">
        <button class="prev">◀</button>
        <button class="next">▶</button>
    </nav>
</figure>

Initialize the gallery with a minimal set of options like this:

var glry = new Glry({
    load: function (direction) {
        if (direction === 'left')
            return 'prev-image.jpg';
        else
            return 'next-image.jpg';
    },
    canNavigate: function (direction) {
        return true;
    }
});

The only required option is load which should be a function that returns the URL of the next/previous image. The function is passed a direction parameter indicating whether the navigation direction is "left" or "right".

You can optionally specify a canNavigate function, to prevent swiping in a given direction. This can be useful if you don't have an infinite amount of images and want to signal that the user has reached the end (or beginning).

Options

The available options and their defaults are as follows:

{
    target: '#figure',
    animationSpeed: 250,
    enableKeyboard: true,
    onLoadStart: false,
    onLoadEnd: false
}

If you want to do some work before or after an image has loaded, you can pass a function to onLoadStart/onLoadEnd.

Keyboard navigation is enabled per default, and maps to the / arrow keys to go to next/previous image.