threesixty

Version: 0.1.2

A jQuery plugin for generating a draggable 360 preview from an image sequence.

Usage

Include the latest jQuery and assets/js/jquery.threesixty.js in your HTML page.

html

<div class="threesixty" data-path="assets/img/src/gem{index}.jpg" data-count="61"></div>

The data-path attribute assets/img/src/gem{index}.jpg is the path to the image sequence. The index being used to grab the images is 0-based and 1-digit. The data-count attribute is the number of images.

js

$(document).ready(function(){     $('.threesixty').threeSixty({         dragDirection: 'horizontal',         useKeys: false     }); });

• dragDirection : horizontal || vertical, horizontal is default.
• useKeys : true || false, false is default
• draggable : true || false, true is default

api

javascript $('.threesixty').nextFrame();

 Step to the next frame.  ```javascript``` $('.threesixty').prevFrame(); 

Step to the previous frame.

events

javascript $('.threesixty').on('down', function(){ // when user starts to drag }); $('.threesixty').on('move', function(){ // as user is dragging }); $('.threesixty').on('up', function(){ // when user finishes dragging});

 ## To Do  * ~~Add mouse-wheel functionality as an option (default:off)~~ (not doing this, users should control this outside of plugin using nextFrame/prevFrame) * ~~Add arrow key functionality as an option (default:off)~~ * ~~Expose nextFrame() & prevFrame() methods, allowing users to connect UI controls~~ * build flick/toss physics (can this be done smoothly?) * ~~add touch/swipe support~~  ## In the Wild  * [Example Site](http://nick-jonas.github.com/threesixtyjs)   ## Credits  * [Will Adams](https://github.com/willistherage) for the example 3D image sequence. * [Tom Genoni](https://github.com/tomgenoni) for the [preloader](https://github.com/tomgenoni/ouroboros).