Press "Enter" to skip to content

jQuery SpriteSpin Animation Plugin | Product Image Viewer

SpriteSpin is a jQuery plugin that converts picture frames into animation. Requires an array of photos or striped pattern sheets and running them frame-by-frame like a moving photo notebook. The goal of this plugin is to provide a 360-degree view of any type of product.

The plugin has been designed with scalability in mind and allows web developers to customize the behavior and rendering of animations.

Features:

  • Plenty of possible parameters
  • Three modules: 360 degrees, panorama, and gallery.
  • Supports for drag, click on, and swipe behaviors
  • Touch-enabled and cellular friendly

How to make use of it:

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./../src/spritespin.js"></script>

2. Create a container for the picture viewer.

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

3. 360 spins with 36 photos / 36 frames.

<script>$(function(){var frames=["images/rad_zoom_001.jpg","images/rad_zoom_002.jpg","images/rad_zoom_003.jpg","images/rad_zoom_004.jpg","images/rad_zoom_005.jpg","images/rad_zoom_006.jpg","images/rad_zoom_007.jpg","images/rad_zoom_008.jpg","images/rad_zoom_009.jpg","images/rad_zoom_010.jpg","images/rad_zoom_011.jpg","images/rad_zoom_012.jpg","images/rad_zoom_013.jpg","images/rad_zoom_014.jpg","images/rad_zoom_015.jpg","images/rad_zoom_016.jpg","images/rad_zoom_017.jpg","images/rad_zoom_018.jpg","images/rad_zoom_019.jpg","images/rad_zoom_020.jpg","images/rad_zoom_021.jpg","images/rad_zoom_022.jpg","images/rad_zoom_023.jpg","images/rad_zoom_024.jpg","images/rad_zoom_025.jpg","images/rad_zoom_026.jpg","images/rad_zoom_027.jpg","images/rad_zoom_028.jpg","images/rad_zoom_029.jpg","images/rad_zoom_030.jpg","images/rad_zoom_031.jpg","images/rad_zoom_032.jpg","images/rad_zoom_033.jpg","images/rad_zoom_034.jpg"];$("#360frames").spritespin({width:480,height:327,frames:frames.length,behavior:"drag",module:"360",sense:-1,source:frames,animate:true,loop:true,frameWrap:true,frameStep:1,frameTime:60,enableCanvas:true});});</script>

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 up<a href="#!">date</a>s. 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 

Versatile jQuery Product Image Viewer Plugin, Spritespin Github


See Demo And Download

Official Website(giniedp): Click Here

This superior jQuery/javascript plugin is developed by giniedp. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *