This time I will share jQuery Plugin and tutorial about Versatile jQuery Product Image Viewer Plugin – SpriteSpin, hope it will help you in programming stack.
| File Size: | 160 KB |
|---|---|
| Views Total: | 25916 |
| 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
Basic Usage:
1. Load the jQuery javascript library and jQuery SpriteSpin on your web page
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
2 |
<script src="./../src/spritespin.js" type="text/javascript"></script> |
2. Create a container for the image viewer
1 |
<div id="360frames"></div> |
3. 360 spin with 36 images / 36 frames
01 |
<script type="text/javascript"> |
02 |
$(function(){ |
03 |
var frames = [ |
04 |
"images/rad_zoom_001.jpg", |
05 |
"images/rad_zoom_002.jpg", |
06 |
"images/rad_zoom_003.jpg", |
07 |
"images/rad_zoom_004.jpg", |
08 |
"images/rad_zoom_005.jpg", |
09 |
"images/rad_zoom_006.jpg", |
10 |
"images/rad_zoom_007.jpg", |
11 |
"images/rad_zoom_008.jpg", |
12 |
"images/rad_zoom_009.jpg", |
13 |
"images/rad_zoom_010.jpg", |
14 |
"images/rad_zoom_011.jpg", |
15 |
"images/rad_zoom_012.jpg", |
16 |
"images/rad_zoom_013.jpg", |
17 |
"images/rad_zoom_014.jpg", |
18 |
"images/rad_zoom_015.jpg", |
19 |
"images/rad_zoom_016.jpg", |
20 |
"images/rad_zoom_017.jpg", |
21 |
"images/rad_zoom_018.jpg", |
22 |
"images/rad_zoom_019.jpg", |
23 |
"images/rad_zoom_020.jpg", |
24 |
"images/rad_zoom_021.jpg", |
25 |
"images/rad_zoom_022.jpg", |
26 |
"images/rad_zoom_023.jpg", |
27 |
"images/rad_zoom_024.jpg", |
28 |
"images/rad_zoom_025.jpg", |
29 |
"images/rad_zoom_026.jpg", |
30 |
"images/rad_zoom_027.jpg", |
31 |
"images/rad_zoom_028.jpg", |
32 |
"images/rad_zoom_029.jpg", |
33 |
"images/rad_zoom_030.jpg", |
34 |
"images/rad_zoom_031.jpg", |
35 |
"images/rad_zoom_032.jpg", |
36 |
"images/rad_zoom_033.jpg", |
37 |
"images/rad_zoom_034.jpg" |
38 |
]; |
39 |
40 |
$("#360frames").spritespin({ |
41 |
width : 480, |
42 |
height: 327, |
43 |
frames: frames.length, |
44 |
behavior: "drag", // "hold" |
45 |
module: "360", |
46 |
sense : -1, |
47 |
source: frames, |
48 |
animate : true, |
49 |
loop: true, |
50 |
frameWrap : true, |
51 |
frameStep : 1, |
52 |
frameTime : 60, |
53 |
enableCanvas : true |
54 |
}); |
55 |
56 |
}); |
57 |
</script> |
4. Parameters
01 |
// Stitched source image or array of files |
02 |
source: undefined, |
03 |
04 |
// actual display width |
05 |
width : undefined, |
06 |
07 |
// actual display height |
08 |
height: undefined, |
09 |
10 |
// Total number of frames |
11 |
frames: undefined, |
12 |
13 |
// Number of frames in one row of sprite sheet (if source is a spritesheet) |
14 |
framesX : undefined, |
15 |
16 |
lanes : 1, |
17 |
18 |
// The presentation module to use |
19 |
module: '360', |
20 |
21 |
// The interaction module to use |
22 |
behavior : 'drag', |
23 |
24 |
// The rendering mode to use |
25 |
renderer : 'canvas', |
26 |
27 |
lane : 0, |
28 |
29 |
// Initial (and current) frame number |
30 |
frame : 0, |
31 |
32 |
// Time between up<a href="https://www.jqueryscript.net/time-clock/">date</a>s. Set to 40 which is 25 frames per second |
33 |
frameTime : 40, |
34 |
35 |
// Runs animation |
36 |
animate : true, |
37 |
38 |
// If true animation is played backward |
39 |
reverse : false, |
40 |
41 |
// Loops the animation |
42 |
loop : true, |
43 |
44 |
// Stops the animation at this frame if loop is disabled |
45 |
stopFrame : 0, |
46 |
47 |
// Same as 'loop' but for user interaction |
48 |
wrap : true, |
49 |
wrapLane : false, |
50 |
51 |
// Interaction sensitivity used by behavior implementations |
52 |
sense : 1, |
53 |
54 |
// Interaction sensitivity used by behavior implementations |
55 |
senseLane : undefined, |
56 |
57 |
orientation : 'horizontal', |
58 |
detectSubsapling : true, |
59 |
60 |
// Occurs when plugin has been initialized, but before loading the source files |
61 |
onInit: undefined, |
62 |
63 |
// Occurs when any source file has been loaded |
64 |
onProgress: undefined, |
65 |
66 |
// Occurs when all source files have been loaded |
67 |
onLoad: undefined, |
68 |
69 |
// Occurs when the frame number has been updated (e.g. during animation) |
70 |
onFrame : undefined, |
