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 |
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:
- jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
- jQuery Plugin For Draggable 360 Degrees Product Image View - j360
- AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
- Cyclotron - 360°Panorama Image Display Plugin
- jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
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.