Versatile jQuery Product Image Viewer Plugin - SpriteSpin

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

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.

Features:

  • 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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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">
$(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", // "hold"
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 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 

Changelog:

2020-08-29

  • v4.1.0: updated

2019-05-02

  • v4.0.11: improved types

2019-04-30

  • v4.0.10: zoom module fixes

2018-05-01

  • v4.0.5: fixed blurCss default value

2018-04-06

  • enabled rendering of multiple sprite sheets

2018-03-22

  • retain animation after drag

2018-03-15

  • v4.0.1

2017-02-14

  • v3.4.3: fixed responsive with fullscreen

2016-09-29

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

2016-09-03

  • v3.4.1: Bugfix

2016-08-06

  • v3.4: Bugfix

2015-03-18

  • v3.3.3

2015-02-25

  • fixed flickering for internet explorer

2015-02-09

  • invert drag direction on zoom module for touch interaction

2015-01-19

  • Fixed touch scrolling

2014-12-08

  • v3.2.2

2014-12-06

  • added option to enable or disable detection of subsampling

2014-11-03

  • build and bump to version 3.2.0

2014-06-25

  • fixed playTo

2014-06-24

  • added options to playTo api method

2014-06-13

  • spritespin is chainable

2014-05-29

  • fixed mobile event handling

2014-05-17

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