jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs

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.