A jQuery plugin for generating a draggable 360 preview from an image sequence.
JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
nick-jonas Merge branch 'master' of https://github.com/modernassembly/threesixtyjs
* 'master' of https://github.com/modernassembly/threesixtyjs: (22 commits)
  new style without icon font
  removed font
  added 'down', 'move', and 'up' events
  Update README.md
  bumped version no
  multiple 360 element bug, movement  bug
  Update README.md
  Update README.md
  Update README.md
  added touch support, bump to v0.1.0
  Update README.md
  added an option to use arrow keys
  Update README.md
  added prev frame / next frame stepping
  IE 7/8 fixes
  event handlers using jquery for cross-browser
  using $.inArray for IE compatibility
  Update README.md
  Update README.md
  Update README.md
  ...
Latest commit 405a3cf Jun 27, 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).