weblinc/jquery-threesixty

A jQuery plugin for 360 image rotations

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.

jquery-threesixty's Issues

Apply 360 view for multiple image in one page

Is it possible to have multiple thumbnails and have each of them a 360 view of the object?
I've tried tinkering with the demo index.html using id "threesixty-a" instead of class. Duplicated the style and <script> for each id. But it didn't work.
I understand that this feature usually used for a page that has only a single object. But I've seen plugins like this (https://www.magictoolbox.com/magic360/examples/) that's able to display multiple instances of the 360 view.

Second question, can I prepare the image sprite manually in Photoshop? I don't quite understand how to use the Sprite-Factory.

Much appreciated!