Skip to content
A jQuery plugin for generating a draggable 360 preview from an image sequence.
Branch: master
Clone or download
Nick Jonas
Nick Jonas updated license
Latest commit 9bc0f61 Oct 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets updated license Oct 7, 2018
scss new style without icon font Jun 24, 2013
.gitignore removed webfonts from history Jun 26, 2013
LICENSE-2.0.txt added license and min build Oct 3, 2018
README.md added 'down', 'move', and 'up' events Feb 18, 2013
index.html new style without icon font Jun 24, 2013

README.md

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).
You can’t perform that action at this time.