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
1
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| // Stitched source image or array of filessource: undefined,// actual display widthwidth : undefined,// actual display heightheight: undefined,// Total number of framesframes: undefined,// Number of frames in one row of sprite sheet (if source is a spritesheet)framesX : undefined,lanes : 1,// The presentation module to usemodule: '360',// The interaction module to usebehavior : 'drag', // The rendering mode to userenderer : 'canvas', lane : 0,// Initial (and current) frame numberframe : 0,// Time between up<a href="http://www.jqueryscript.net/time-clock/">date</a>s. Set to 40 which is 25 frames per secondframeTime : 40, // Runs animationanimate : true, // If true animation is played backwardreverse : false,// Loops the animationloop : true, // Stops the animation at this frame if loop is disabledstopFrame : 0,// Same as 'loop' but for user interactionwrap : true, wrapLane : false,// Interaction sensitivity used by behavior implementationssense : 1,// Interaction sensitivity used by behavior implementationssenseLane : undefined,orientation : 'horizontal', detectSubsapling : true,// Occurs when plugin has been initialized, but before loading the source filesonInit: undefined,// Occurs when any source file has been loadedonProgress: undefined,// Occurs when all source files have been loadedonLoad: 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 drawnonDraw: undefined |
No comments:
Post a Comment