Skip to content
A jQuery plugin for 360 image rotations
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
make
src
LICENSE
Makefile
README.md
jquery.threesixty.js
jquery.threesixty.min.js

README.md

jquery.threesixty

A jQuery plugin for 360 image rotations. Use a vertical/horizontal spritesheet (recommending Sprite Factory) as a background-image on an element, call the plugin on the element, and magic happens. Much <3 to Aaron Bohenick for cat statue renders~

Options

  • dragAxis takes either a string of x or y indicating the axis in which the mouse drag should trigger a sprite change (default: 'x')
  • spriteDim takes an object with an x and y property of the dimensions of a single sprite
  • spriteSheetDim takes an object with an x and y property of the dimensions of the entire image
  • sensitivity a number of how many pixels a drag has to move to trigger the next frame of the animation (default: 3)

Example

<div class="threesixty" style="height:390px; width:280px; background-image: url(360.jpg);"></div>
<script>
    $('.threesixty').threesixty({
        dragAxis: 'x',
        spriteDim: { x: 280, y: 390 },
        spriteSheetDim: { x: 280, y: 15600 }
        sensitivity: 3
    });
</script>

Contributing

This project uses smoosh for compiling, linting.

You can’t perform that action at this time.