Touch-enabled 360 Image Preview In JavaScript – Threesixty

Category: Image , Javascript | January 18, 2020
Author: mladenilic
Views Total: 646 views
Official Page: Go to website
Last Update: January 18, 2020
License: MIT

Preview:

Touch-enabled 360 Image Preview In JavaScript – Threesixty

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:

01/18/2020

  • v1.2.3

09/28/2019

  • Fix resizing height detection

You Might Be Interested In:


Leave a Reply