Spritespin-example

A rotating eskimo

Below this paragraph is a rotateable suit from an eskimo.

The code behind it

Loading the jQuery library from a CDN - this might as well be downloaded.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Loading the SpriteSpin from a CDN - this might as well be downloaded.

<script src="https://rawgithub.com/giniedp/spritespin/master/dist/spritespin.min.js"></script>

Inserting an element in the DOM

<div id='exampleSpriteSpin' style="margin: auto;"></div>

Initializing the SpriteSpin library

<script type='text/javascript'>
// A function that generates URL adresses to image thumbnails in the natmus collection.
function image_url( catalog, id ) {
	return "http://samlinger.natmus.dk/CIP/preview/thumbnail/" +catalog+ "/" + id;
}
// Generating an ordered array of image URLs to be displayed.
var sources = [
	image_url( 'ES', 53108 ),
	image_url( 'ES', 53140 ),
	image_url( 'ES', 53126 ),
	image_url( 'ES', 53111 ),
	image_url( 'ES', 53158 ),
	image_url( 'ES', 53143 ),
	image_url( 'ES', 53128 ),
	image_url( 'ES', 53113 ),
	image_url( 'ES', 53098 ),
	image_url( 'ES', 53145 ),
	image_url( 'ES', 53130 ),
	image_url( 'ES', 53115 ),
	image_url( 'ES', 53100 ),
	image_url( 'ES', 53147 ),
	image_url( 'ES', 53131 ),
	image_url( 'ES', 53117 ),
	image_url( 'ES', 53102 ),
	image_url( 'ES', 53150 ),
	image_url( 'ES', 53134 ),
	image_url( 'ES', 53120 ),
	image_url( 'ES', 53105 ),
	image_url( 'ES', 53153 ),
	image_url( 'ES', 53137 ),
	image_url( 'ES', 53123 )
];
// Waiting for the whole page to load.
$(function() {
	// Load the first image, to find out the dimensions
	// of the images. Assuming equal dimensions on these.
	$("<img>").on('load', function( e ) {
		// Initialize the sprite spin from this.
		$("#exampleSpriteSpin").spritespin({
			source: sources,
			width: e.target.width,
			height: e.target.height
		});
	}).attr('src', sources[0]);
});
</script>