Embeddable photo viewer library
Switch branches/tags
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.
demos Nicer image set for demo (faster loading as well), catch more touchmo… Apr 9, 2013
src
.gitignore
.kateconfig
LICENSE.txt Updated license Jan 17, 2013
README.md
build

README.md

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,
});