Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate
File Size: | 403 KB |
---|---|
Views Total: | 3496 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ThreeSixtyRotate is a jQuery based product viewer that allows to automatically or manually rotate a sequence of images at different angles.
See also:
- Cyclotron - 360°Panorama Image Display Plugin
- 360 Degrees Image Rotate & Zoom Plugin with jQuery and Canvas - Tikslus360
- Simple 360 Degrees Image Viewer Plugin For jQuery - Rotateimage
- jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
- jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
- AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
- jQuery Plugin For Draggable 360 Degrees Product Image View - j360
- Super Tiny jQuery 360 Degrees Product Image Viewer
How to use it:
1. Prepare a sequence of product images in the same extension. For example: 1.png, 2.png, 3.png and so on.
2. Include the jQuery ThreeSixtyRotate plugin after jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.360rotate.js"></script>
3. Create an empty container for the image viewer.
<div class="demo"> <p class="load">Now Loading...</p> </div>
4. The required CSS styles.
.demo { position: relative; width: 480px; height: 270px; } .demo li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-background-size: 100%; background-size: 100%; } .load { line-height: 270px; text-align: center; }
5. Call the plugin on the container element you just created.
$(function(){ ThreeSixtyRotate('.demo',{ imgPath: 'img/', // Path to your product images. imgEx: 'png', // All images must have this file extension zeroPadding: 0, // Zero Padding (ex:1->0、01->1、001->2) imgFirstNum: 1, totalFrame: 23, startFrame: 1, clockwise: false, // false = counterclockwise rotateSpeed: 1, inertia: true, autoRotate: false, // auto rotation frameRate: 24, overStop: true, // Pause on hover when autoRotate is true. preload: true, showDuration: 300 }); });
Change log:
2014-09-06
- fixed bugs.
2014-09-05
- fixed bugs.
2014-08-18
- fix for IE8
This awesome jQuery plugin is developed by 1026. For more Advanced Usages, please check the demo page or visit the official website.