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 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

Official Website(giniedp): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.