jQuery SpriteSpin Animation Plugin | Product Image Viewer

Features:

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

Basic Usage:

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

2. Create a container for the picture viewer

3. 360 spins with 36 photos / 36 frames

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 

Versatile jQuery Product Image Viewer Plugin, Spritespin Github

Changelog:

2019-04-30

• v4.0.10: zoom module fixes

2018-05-01

• v4.0.5: mounted blurCss default worth

2018-04-06

• enabled rendering of a number of sprite sheets

2018-03-22

• retain animation after drag

2017-02-14

• v3.4.3: mounted responsive with fullscreen

2016-09-29

• v3.4.2: mounted fullscreen API. reboot plugin on orientation change

2015-02-25

• mounted flickering for web explorer

2015-02-09

• invert drag path on zoom module for contact interplay

2014-12-06

• added choice to allow or disable detection of subsampling

2014-11-03

• construct and bump to model 3.2.0

2014-06-24

• added choices to playTo API technique

2014-05-29

• mounted cellular occasion dealing with

See Demo And Download