Via HRJ ("Overworked mad genius readying to take on the world. I am his neighbor") comes a cool puzzle piece demo written using SVG and JQuery SVG:
HRJ has some nice code. First he calls the Flickr API using JQuery and JSON and makes a JigSaw puzzle piece for each one; in the code below he is also grabbing a picture name from the #hash value in the URL if it is present:
$.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=3cac122425cd16eaa1ea4c1b8bb3ff26&photo_id='+specifiedHash[1]+'&format=json&jsoncallback=?', function(response) {
if (response.stat && response.stat == 'ok') {
var p = response.photo;
$.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=3cac122425cd16eaa1ea4c1b8bb3ff26&photo_id='+specifiedHash[1]+'&format=json&jsoncallback=?', function(response2) {
if (response2.stat && response2.stat == 'ok') {
updateStatus('Observe the tiles. Click on them to begin.');
var medSize = response2.sizes.size[4] ? response2.sizes.size[4] : response2.sizes.size[3];
currJigsaw = new JigSaw(medSize.source, medSize.width, medSize.height, p.urls.url[0]._content, p.title._content);
var locationMatch = photoHashIgnorePattern.exec(window.location),
myLocation = locationMatch ? locationMatch[1] : window.location;
$('#puzzleLink').html('<a href="'+myLocation+'#photo_'+p.id+'">Puzzle\'s link</a>');
}
});
} else {
updateStatus('Error! Couldn\'t load image');
}
});
The code that animates all the tiles when you first click on a board is interesting, using a bit of JQuery SVG:
var imgCenter = {x : width/2, y: height/2};
for (var i = tiles.length; i--;) {
$(tiles[i].sN).animate({'svgTransform':'rotate('+[tiles[i].r,imgCenter.x, imgCenter.y].join(',')+') translate('+[imgCenter.x, imgCenter.y].join(',')+')'}, {
duration:1000,
complete : startPlay
});
}
}
Basically each of the tiles is rotated and translated over 1 second with a nice animation effect.