sxhao/photo-viewer

Embeddable photo viewer library

PhotoViewer

PhotoViewer is an aggressively optimized and thouroghly tested photo viewer library for App.js. It works across modern mobile browsers (Android 2.2+, iOS 5+).

Try the demo (preferably on your phone, it's easy to be smooth on desktop): http://code.kik.com/photo-viewer/demos/index.html

PhotoViewer is suitable for photo galleries of any size. Under the hood, it only ever handles a maximum of three photos at once, meaning you get the same performance regardless of how large your album is.

Download (minified): photo-viewer.js

Usage

For basic usage, just give the PhotoViewer your page, and some urls to munch on:

App.controller('viewer', function (page, data) {
	var photoViewer = new PhotoViewer(page, data.urls);
});

You can listen to events:

photoViewer.on('flip', function (page) {
	data.index = page;
	App.saveStack();
});

And customize the options to your needs:

var photoViewer = new PhotoViewer(page, urls, {
	// Automatically update the page title as the user swipes through
	// photos?
	automaticTitles: true,
	// Hide the titlebar automatically, using whichever gestures are
	// recognized on the device's native photo viewer.
	autoHideTitle: true,
	// An element used as a placeholder while photos are loading.
	// A duplicate is made each time it is used.
	loadingElm: defaultLoadingElm,
	// Photo index to start at.
	startAt: 0,
});

A complete example of a typical PhotoViewer user:

App.controller('viewer', function (page, data) {
	var photoViewer = new PhotoViewer(page, data.urls, {
		startAt: parstInt(data.index, 10),
	});
	photoViewer.on('flip', function (page) {
		data.index = page;
		App.saveStack();
	});
});
App.load('viewer', {
	urls: ['funny-cat-picture.jpg', 'funny-lolcat.jpg'],
	index: 1,
});