Versatile jQuery Product Image Viewer Plugin - SpriteSpin

Versatile jQuery Product Image Viewer Plugin - SpriteSpin
File Size: 17.4 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

SpriteSpin is an amazing jQuery plugin for playing sprite image animations to provide a 360 degree (or panorama and gallery) view of your product image. The idea is to take an array of images or a stitched sprite sheet and plays them frame by frame like a flip book.


  • Plenty of option parameters
  • 3 modules: 360 degree, panorama and gallery.
  • Supports for drag, click and swipe behaviors
  • Touch enabled and mobile friendly

See also:

Basic Usage:

1. Load the jQuery javascript library and jQuery SpriteSpin on your web page

<script src=""></script>
<script src="./../src/spritespin.js" type="text/javascript"></script>

2. Create a container for the image viewer

<div id="360frames"></div>

3. 360 spin with 36 images / 36 frames

<script type="text/javascript">
var frames = [

width : 480,
height: 327,
frames: frames.length,
behavior: "drag", // "hold"
module: "360",
sense : -1,
source: frames,
animate : true,
loop: true,
frameWrap : true,
frameStep : 1,
frameTime : 60,
enableCanvas : true


4. Parameters

// Stitched source image or array of files
source: undefined,

// actual display width
width : undefined,

// actual display height
height: undefined,

// Total number of frames
frames: undefined,

// Number of frames in one row of sprite sheet (if source is a spritesheet)
framesX   : undefined,

lanes : 1,

// The presentation module to use
module: '360',

// The interaction module to use
behavior  : 'drag',   

// The rendering mode to use
renderer  : 'canvas', 

lane  : 0,

// Initial (and current) frame number
frame : 0,

// Time between updates. Set to 40 which is 25 frames per second
frameTime : 40,   

// Runs animation
animate   : true, 

// If true animation is played backward
reverse   : false,

// Loops the animation
loop  : true, 

// Stops the animation at this frame if loop is disabled
stopFrame : 0,

// Same as 'loop' but for user interaction
wrap  : true, 
wrapLane  : false,

// Interaction sensitivity used by behavior implementations
sense : 1,

// Interaction sensitivity used by behavior implementations
senseLane : undefined,

orientation   : 'horizontal', 
detectSubsapling  : true,

// Occurs when plugin has been initialized, but before loading the source files
onInit: undefined,

// Occurs when any source file has been loaded
onProgress: undefined,

// Occurs when all source files have been loaded
onLoad: undefined,

// Occurs when the frame number has been updated (e.g. during animation)
onFrame   : undefined,

// Occurs when all update is complete and frame can be drawn
onDraw: undefined 

Change logs:


  • v3.4.3: fixed responsive with fullscreen


  • v3.4.2: fixed fullscreen api. reboot plugin on orientation change


  • v3.4.1: Bugfix


  • v3.4: Bugfix


  • v3.3.3


  • fixed flickering for internet explorer


  • invert drag direction on zoom module for touch interaction


  • Fixed touch scrolling


  • v3.2.2


  • added option to enable or disable detection of subsampling


  • build and bump to version 3.2.0


  • fixed playTo


  • added options to playTo api method


  • spritespin is chainable


  • fixed mobile event handling


  • styling and fixes

This awesome jQuery plugin is developed by giniedp. For more Advanced Usages, please check the demo page or visit the official website.