ProtoSkim

ProtoSkim is a simple javascript plugin that allow you to implement a skim effect (similar to that of Apple's Mobile Me Gallery and qQgallery) on images gallery. It use Ajax and json, is completely unobtrusive and requires Prototype Framework (1.6.1). ProtoSkim was inspired by by an interesting technique found on pixelcity.com. You can download here source code and examples.

First example using a callback function that enable Zoomy.js

HTML

<div id="skim-example">
	<img src="images/thumbs/simpson.jpg" width="200" height="150" alt="Homar Simpson" />
</div>

JAVASCRIPT

var demo = function() { 
	
	new protoSkim('skim-example', { callback: myCallBack });
    
}

myCallBack = function() {
	$$('div#skim-example area').each(function(elem) {
		new Zoomy(elem, { draggable: true });
	});
}

document.observe('dom:loaded', demo);

JSON

[ 
	{ "title": "Apollo Mission", "href": "images/apollo.jpg", "thumbnail": "images/thumbs/apollo.jpg" },
	{ "title": "Bambi", "href": "images/bambi.jpg", "thumbnail": "images/thumbs/bambi.jpg" }, 
	{ "title": "Britney Spears", "href": "images/britney.jpg", "thumbnail": "images/thumbs/britney.jpg" },
	{ "title": "Call of Duty", "href": "images/callofduty.jpg", "thumbnail": "images/thumbs/callofduty.jpg" },	
	{ "title": "Ferrari Dream", "href": "images/ferrari.jpg", "thumbnail": "images/thumbs/ferrari.jpg" }, 
	{ "title": "Firefox", "href": "images/firefox.jpg", "thumbnail": "images/thumbs/firefox.jpg" }, 
	{ "title": "Geko", "href": "images/geko.jpg", "thumbnail": "images/thumbs/geko.jpg" },
	{ "title": "Greece", "href": "images/greece.jpg", "thumbnail": "images/thumbs/greece.jpg" },
	{ "title": "Juventus", "href": "images/juve.jpg", "thumbnail": "images/thumbs/juve.jpg" }, 
	{ "title": "Linux", "href": "images/linux.jpg", "thumbnail": "images/thumbs/linux.jpg" }, 
	{ "title": "Panoramix", "href": "images/panoramix.jpg", "thumbnail": "images/thumbs/panoramix.jpg" },
	{ "title": "HyperText PreProcessor", "href": "images/php.jpg", "thumbnail": "images/thumbs/php.jpg" },
	{ "title": "Red Hat", "href": "images/redhat.jpg", "thumbnail": "images/thumbs/redhat.jpg" }, 
	{ "title": "Red leaves", "href": "images/redleaves.jpg", "thumbnail": "images/thumbs/redleaves.jpg" }, 
	{ "title": "Homar Simpson", "href": "images/simpson.jpg", "thumbnail": "images/thumbs/simpson.jpg" }, 
	{ "title": "Tecno Music", "href": "images/tecnomusic.jpg", "thumbnail": "images/thumbs/tecnomusic.jpg" },
	{ "title": "Terra", "href": "images/terra.jpg", "thumbnail": "images/thumbs/terra.jpg" },
	{ "title": "Ubuntu", "href": "images/ubuntu.jpg", "thumbnail": "images/thumbs/ubuntu.jpg" },
	{ "title": "Valentino Rossi", "href": "images/valentino.jpg", "thumbnail": "images/thumbs/valentino.jpg" },
	{ "title": "Andy Warhol", "href": "images/warhol.jpg", "thumbnail": "images/thumbs/warhol.jpg" }
]

Second example using Ajax parameters and another callback function

HTML

<div class="skim-multiple-example" id="gal1">
	<a href="somepage.php?id=1" title="some url"><img src="images/thumbs/bambi.jpg" width="200" height="150" alt="Bambi" /></a>
</div>

<div class="skim-multiple-example" id="gal2">
	<a href="somepage.php?id=2" title="some url"><img src="images/thumbs/panoramix.jpg" width="200" height="150" alt="Panoramix" /></a>
</div>

JAVASCRIPT

var demo = function() { 
    
	$$("div.skim-multiple-example").each( function(node) {
		var galleryID = node.readAttribute('id');
		new protoSkim(node, {
				url: 'json/data.php',
				parameters: 'gallery=' + galleryID,
				callback: function() {
					$$('#'+galleryID+' area').each(function(elem) {
						elem.observe("click", function(e){
							alert(elem.up(0).previous('a').readAttribute('href'));
							Event.stop(e);
						});
					});
				}
		});
	});
    
}

document.observe('dom:loaded', demo);

JSON - PHP5 source from array

<?php
$id = isset($_GET['gallery']) ? substr($_GET['gallery'], 3) : '';

$data = array(
	"1" => array(
		array("title" => "Apollo Mission", "href" => "images/apollo.jpg", "thumbnail" => "images/thumbs/apollo.jpg" ),
		array("title" => "Bambi", "href" => "images/bambi.jpg", "thumbnail" => "images/thumbs/bambi.jpg" ),
		array("title" => "Britney Spears", "href" => "images/britney.jpg", "thumbnail" => "images/thumbs/britney.jpg" ),
		array("title" => "Call of Duty", "href" => "images/callofduty.jpg", "thumbnail" => "images/thumbs/callofduty.jpg" ),
		array("title" => "Ferrari Dream", "href" => "images/ferrari.jpg", "thumbnail" => "images/thumbs/ferrari.jpg" ),
		array("title" => "Firefox", "href" => "images/firefox.jpg", "thumbnail" => "images/thumbs/firefox.jpg" ),
		array("title" => "Geko", "href" => "images/geko.jpg", "thumbnail" => "images/thumbs/geko.jpg" ),
		array("title" => "Greece", "href" => "images/greece.jpg", "thumbnail" => "images/thumbs/greece.jpg" ),
		array("title" => "Juventus", "href" => "images/juve.jpg", "thumbnail" => "images/thumbs/juve.jpg" ),
		array("title" => "Linux", "href" => "images/linux.jpg", "thumbnail" => "images/thumbs/linux.jpg" )
	),
	"2" => array(

       array("title" => "Panoramix", "href" => "images/panoramix.jpg", "thumbnail" => "images/thumbs/panoramix.jpg" ),
		array("title" => "HyperText PreProcessor", "href" => "images/php.jpg", "thumbnail" => "images/thumbs/php.jpg" ),
		array("title" => "Red Hat", "href" => "images/redhat.jpg", "thumbnail" => "images/thumbs/redhat.jpg" ),
		array("title" => "Red leaves", "href" => "images/redleaves.jpg", "thumbnail" => "images/thumbs/redleaves.jpg" ),
		array("title" => "Homar Simpson", "href" => "images/simpson.jpg", "thumbnail" => "images/thumbs/simpson.jpg" ),
		array("title" => "Tecno Music", "href" => "images/tecnomusic.jpg", "thumbnail" => "images/thumbs/tecnomusic.jpg" ),
		array("title" => "Terra", "href" => "images/terra.jpg", "thumbnail" => "images/thumbs/terra.jpg" ),
		array("title" => "Ubuntu", "href" => "images/ubuntu.jpg", "thumbnail" => "images/thumbs/ubuntu.jpg" ),
		array("title" => "Valentino Rossi", "href" => "images/valentino.jpg", "thumbnail" => "images/thumbs/valentino.jpg" ),
		array("title" => "Andy Warhol", "href" => "images/warhol.jpg", "thumbnail" => "images/thumbs/warhol.jpg" )
	)

);

if (array_key_exists($id, $data)) {
	jsonstring = json_encode($data[$id]);
	print_r($jsonstring);}
?>

JSON - PHP5 source from mysql

<?php
include("db.php");
$id = isset($_GET['gallery']) ? substr($_GET['gallery'], 3) : '';

$immaginisql	= "SELECT title, file FROM images WHERE imageID=".(int)$id." ORDER BY position LIMIT 10";
$result			= mysql_query($immaginisql);

$globalarray = array();

if (mysql_num_rows($result)>0) {
	while ($row = mysql_fetch_array($result)) {
		$title  = $row["title"];
		$file   = $row["file"];
		
		$thumbarray = array('thumbnail'=>"images/small/".$file, 'href'=>"images/large/".$file, 'title'=>$title);
		$globalarray[] =$ thumbarray;
	}
}


print_r(json_encode($globalarray));
?>

Other examples in action

Basic example (the simplest json source).
Example with useResize options to generate thumbnails (php script required, thimthumb included in download package)
ShadowBox Implementation (ShadowBox Media Viewer is not included in download package)..

Usage and script configuration.

HTML markup required is really minimal: just a div (referenced with an id attribute) containing an image placeholder: then you must have a file in JSON format that contains the image data to populate the effect. Finally initialize ProtoSkim as below:

new protoSkim(container, {[options]});

Class options:

url: the path of the json source file (default value 'json/data.json').
parameters: optional parameters for the Ajax request.
randomize: display the thumbnails at random (default false).
limit: limit of images loaded by the effect (default 20).
useResizer: enable the thumbnail generator (default false).
resizer: the path of the php script that generate thumbnails (default 'timthumb.php').
callback: (default null).

Json Object properties options:

href (optional), can contain images, file, url.
thumbnail, the path of thumbnails (required if href properties is missing and useResize options disabled).
title (optional), can contain useful information for caption.

Download.

ProtoSkim is currently in beta and is licensed under the MIT license.

Download ProSkim (14/1/2009 - the package contains working examples and Prototype) or grab just the source code.

You can post your comments, suggestions or bug reports on my blog.