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" }
]
Homar Simpson

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)); ?>
Bambi
Panoramix

Other examples in action

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:

Json Object properties options:

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.