TouchTouch – A Touch Optimized Gallery Plugin

I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.

Highlights

Smooth CSS3 animations and transitions;
A responsive CSS interface that fills the screen and responds to changes in device orientation;
Preloads photos only when they are needed;
Supports swiping through photos;
Displays onscreen arrows and listens for arrow key presses on desktop browsers;

TouchTouch relies entirely on CSS3 for animations, which means that transitions are extra smooth on mobile devices (naturally, this also means that you won’t see any on older browsers). Using some clever CSS, the interface automatically adjusts to the size and orientation of the device, with photos growing to fill the available screen estate (test it by resizing your browser window). And with the help of jQuery, going through photos is done by swiping left or right.

On the desktop, you get that same responsive interface and smooth animations. Browsing the gallery there is done either with the onscreen arrows, or the arrow keys on the keyboard.

jQuery touch-optimized gallery

How to use

Using it is simple. Drop the touchTouch folder (you can find it in the download under assets/) somewhere in your website folder tree. After this, include touchTouch/touchTouch.css in your , and touchTouch.jquery.js right after the jQuery library. The script depends on jQuery 1.7 or above.

After you do all of this, simply call the gallery as a regular jQuery plugin:

$(function()

	// Initialize the gallery
	$('#thumbs a').touchTouch();

);

You must pass anchor elements which point to images in their href attributes for the gallery to work. In addition to conveying which images are to be displayed in the gallery, this also provides a graceful fallback in case JavaScript is not available.

Following Tutorialzine’s tradition of releasing quality resources for developers, the gallery source code is extensively commented and released on Github.