Pano.js

Add multiple Panolens.js 360-panoramic viewers to a page with ease.

• Requires Panolens.js, which is based on Panolens.js by pchen66
• Implements PanoElement and PanoPage

Installation

You can either install via npm and include the scripts in your build process, or use a CDN.

• Using npm packages

  Install dependencies

  # with yarn
  yarn add pano
  
  # with npm
  npm install --save pano

  Import Pano

  import * as Pano from 'pano'

• Using the CDN

  Include scripts via CDN by adding them to your index.html:

  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-vendor-v3.0.0.min.js"></script>
  <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-v3.0.0.min.js"></script>

Usage

1. Instantiate Pano.Page object

   /** ES6 */
   import { Page } from 'pano'
   const panoPage = new Page('pano')
   panoPage.init()
   
   /** ES5 */
   var Pano = require('pano')
   var panoPage = new Pano.Page('pano')
   panoPage.init()

2. Add <pano> elemement HTML

   Include the required width, height, src, caption (optional) attributes for the <pano> element(s) in your view:

   <pano width="1024" height="512" src="https://sbolel.github.io/pano/img/588ca1b0bf_o.jpg" caption="Equirectangular Panorama"/></pano>

3. Initialize all <pano> elements on the page

   var panoPage = new Pano.Page('pano')
   panoPage.init()

Credits

• prescottprue - Webpack implementation, tests, coverage
• pchen66 - Original Panolens.js implementation