Author: | mladenilic |
---|---|
Views Total: | 661 views |
Official Page: | Go to website |
Last Update: | November 23, 2022 |
License: | MIT |
Preview:

Description:
Threesixty is a JavaScript library that generates a draggable, touch-enabled 360 product viewer from a sequence of images defined in a sprite image (or an image array).
Your users can rotate the product images with mouse drag, arrow keys, touch-swipe event, etc.
How to use it:
To get started, you first need to insert your product images at different angles into a sprite image or an image array.
myImg = [ '1.jpg', '2.jpg', '3.jpg', ... ],
Then download and insert the Threesixty.js script into the document.
<script src="/path/to/threesixty.js"></script>
Create a container to place the product image.
<div id="threesixty"></div>
Initialize the Threesixty with the following options.
- image: the path to the sprite image
- width/height: image size
- count: the total number of images
- perRow: how many images per row
- speed: rotate speed
var threesixty = new ThreeSixty(document.getElementById('threesixty'), { image: 'sprite.jpg', width: 320, height: 320, count: 31, perRow: 4, speed: 100 });
You can also create navigation buttons to rotate the product images with click/tap events.
<button class="button" id="prev">Prev</button> <button class="button" id="next">Next</button>
var threesixty = new ThreeSixty(document.getElementById('threesixty'), { prev: document.getElementById('prev'), next: document.getElementById('next') });
Activate the 360 product viewer.
threesixty.play();
All default options.
var threesixty = new ThreeSixty(document.getElementById('threesixty'), { width: 300, height: 300, count: 0, perRow: 0, speed: 100, dragTolerance: 10, swipeTolerance: 10, draggable: true, swipeable: true, keys: true, inverted: false });
More API methods.
// start threesixty.play(); // stat in oposite direction threesixty.play(true); // stop threesixty.stop(); // toggle threesixty.toggle(); // go to next threesixty.next(); // back to previous threesixty.prev(); // go to a frame threesixty.goto(index); // destroy threesixty.destroy();
Changelog:
v1.2.4 (11/23/2022)
- Update
v1.2.3 (04/24/2022)
- Use window instead of global
09/28/2019
- Fix resizing height detection