
threesixtyjs is a jQuery plugin for creating Draggable 360s Image Sequences. It is good for rotating images on drag and/or click to show your products from every angle.
How to use it:
1. Include jQuery library and threesixty.js in your page
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/jquery.threesixty.js"></script>
2. Markup. Using data-count
attribute to set the number of images.
<div class="threesixty" data-path="assets/img/src/gem{index}.jpg" data-count="61">
3. Call the plugin with options
$(document).ready(function(){ var $threeSixty = $('.threesixty'); $threeSixty.threeSixty({ // horizontal OR vertical dragDirection: 'horizontal', // use arrow keys useKeys: true, // is draggable? draggable: true }); });
4. API methods.
// goto next frame $threeSixty.nextFrame(); // back to previous frame $threeSixty.prevFrame();
5. Available events.
$threeSixty.on('down', function(){ // when user starts to drag }); $threeSixty.on('move', function(){ // when user is dragging }); $threeSixty.on('up', function(){ // when user finishes dragging });
Changelog:
2018-10-03
- v0.1.2
This awesome jQuery plugin is developed by nick-jonas. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 03.10.2018
- Source