TouchTouch – A Touch Optimized Gallery Plugin

Martin Angelov — Thu, 26 Apr 2012 22:01:23 +0000

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.

jQuery PhotoShoot Plugin 1.0

Martin Angelov — Wed, 03 Feb 2010 18:15:44 +0000

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration above, or a nice tutorial on how to use it here.

Usage

First, you need to upload the plug-in to your server (it would be best to keep the folder structure intact), and include the stylesheet and js file to the page where you want it to show.

The plug-in depends on version 1.3.2 of jQuery, but will work fine with newer versions as well.

After this you can convert any div on your page by calling the .photoShoot() method and passing a configuration object.

document.ready(function(){

	var config = {
		image : 'picture.jpg',
	}

	$('#selector').photoShoot(config)
});

You can pass additional parameters with the config object, according to the table below.

Parameters

The following parameters are supported:

Supported Parameters
Parameter	Default Value	Description
image	“”	Required parameter. Specify the URL of the image to be shown.
blurLevel	4	The higher the blur level, the more blurred the image.
opacity	0.92	The lower the opacity, the darker the background behind the viewfinder.
viewFinder	{ width:300, height:200, img:” }	Expects an object with the properties width, height and img. With it you can change the size and png graphic of the view finder. If no img is provided, the default one is shown.
onClick	function(){}	Expects the name of the function that is going to be executed on click. An object is passed as a parameter. See below.

The onClick function

You can provide your function to be executed when a click occurs. An object containing the location (left and top) of the viewfinder, relative to the background, is passed as the only parameter. Here is how it works:

document.ready(function(){

	var config = {
		image	: 'picture.jpg',
		blurLevel	: 6,
		opacity	: 0.8,
		onClick	: alertPosition
	}

	function alertPosition(param){
		alert("The viewfinder is located at: "+param.left+"x"+param.top);
	}

	$('#selector').photoShoot(config)
});

License

The plugin is distributed under an MIT license.

Tutorialzine » Plugins