daily-glry

daily-glry

Daily comic strip gallery with mobile/touch support.

Intended for daily comic strips and based on the current date. Specify a start date for the earliest comic, and browse through all strips up to current day.

Supports touch gestures (swipe & shake) and the following keyboard shortcuts:

◀ previous date ▶ next date R random comic T today's comic

daily-glry is based on glry, and requires Moment.js.

Install

With npm:

$ npm install daily-glry --save

or bower:

$ bower install glry daily-glry moment --save

Include the libraries in your web page:

<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/glry/glry.js"></script>
<script src="bower_components/glry/daily-glry.js"></script>

Usage

Place some basic HTML on your page:

<figure id="figure">
	<div class="loading">LOADING</div>
	<div class="error">STRIP MISSING</div>

	<nav class="navigation">
		<button class="prev">◀</button>
		<button class="rand">Random</button>
		<button class="next">▶</button>
		<button class="today">Today</button>
		<button class="share">Share</button>
	</nav>
</figure>

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

var dailyGlry = new DailyGlry({
        dateMin: [2014, 1, 22],
        host: 'http://mycomic.com/archive/',
        extension: '.png',
        onOutOfRange: function () {
            alert('No more comics until tomorrow.');
        }
    });

The only required option is host which should be the base domain and folder of your comics. This will be used to load the daily comic file. The current year and date will be appended to host like this:

http://mycomic.com/archive/2014/20140204.png

Options

The available options and their defaults are as follows:

{
    target: '#figure',
    host: null,
    hashFormat: 'YYYY-MM-DD',
    nameFormat: 'YYYY/YYYYMMDD',
    extension: '.png',
    onOutOfRange: false
}

You can change the filename and hash format with nameFormat/hashFormat using the moment format syntax.

If a date outside the specified range is called, you can call custom logic by passing a function to onOutOfRange.

All the options available in glry can also be used.

Shake support (optional)

If you include the great plugin shake.js, shaking your device will load a random comic same as pressing R.

Just install the plugin and include it on the page:

$ bower install shake.js --save

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