360-Degree Image Viewer with Pure JavaScript – circlr

Category: Image , Javascript | June 25, 2017
Author: andrepolischuk
Views Total: 5,256
Official Page: Go to website
Last Update: June 25, 2017
License: MIT

Preview:

360-Degree Image Viewer with Pure JavaScript – circlr

Description:

circlr.js is a lightweight JavaScript library which allows you to create a 360-degree panoramic view from a series of images.

circlr.js allows the visitor to rotate the product images with scroll, mouse and touch events and works on all touch devices without any other touch library support.

Installation:

# NPM
$ npm install circlr --save

Basic usage:

Download and include the latest version of circlr.js library at the end of your document.

<script src="circlr.min.js"></script>

Prepare your product images with different angles and insert them into the document as follow.

<div id="circlr">
  <img data-src="images/00.jpg">
  <img data-src="images/01.jpg">
  <img data-src="images/02.jpg">
  <img data-src="images/03.jpg">
  <img data-src="images/04.jpg">
  <img data-src="images/05.jpg">
  <img data-src="images/06.jpg">
  <img data-src="images/07.jpg">
  <img data-src="images/08.jpg">
  <img data-src="images/09.jpg">
  <img data-src="images/10.jpg">
  <img data-src="images/11.jpg">
  <img data-src="images/12.jpg">
  <img data-src="images/13.jpg">
  <img data-src="images/14.jpg">
  <img data-src="images/15.jpg">
  <div id="loader"></div>
</div>

Initialize the image viewer.

const el = document.querySelector('#circlr');
circlr(el)
  .scroll(true)
  .play()
  .on('show', n => {

  });

API methods.

// Return object DOM node
crl(el)

// Rotation via scroll flag.
crl.scroll(n)

// Vertical orientation flag.
crl.vertical(n)

// Reverse rotation flag.
crl.reverse(n)

// Cyclic rotation flag, default true.
crl.cycle(n)

// Start frame, default 0.
crl.start(n)

// Playback interval, default 75 ms.
crl.interval(ms)

//Frame number for playback to him or infinity playback if number in not specified.
crl.play([n])

// Stop playback
crl.stop()

// Hide object DOM node
crl.hide()

// Show specified frame.
crl.show(n)

// Show previous frame.
crl.prev()

// Show next frame.
crl.next()

// Unbind rotation events.
crl.unbind()

Changelog:

v3.1.1 (06/25/2017)

  • Add unbind listeners method

You Might Be Interested In:


One thought on “360-Degree Image Viewer with Pure JavaScript – circlr

  1. Cc C

    just to let you know that rotation using mousedrag no longer works on IE 10+

    Reply

Leave a Reply