Pano.js

Easily add multiple Panolens.js 360-panoramic viewers to a page

> View the demo

Implements PanoElement and PanoPage
Requires Panolens.js
Based on Panolens.js by pchen66

Installation

npm install --save pano

Usage

NPM

Include and use pano:

ES6

  import Pano from 'pano'
  import { Page } from 'pano'
  // Pano.Page === Page
  const panoPage = new Page('pano')
  panoPage.init()

ES5

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

Browser (CDN)

Add panolens.js and pano.js scripts in your HTML:

<head>
  <script type="text/javascript" src="node_modules/panolens.js/panolens.min.js"></script>
  <script type="text/javascript" src="node_modules/pano/dist/pano.min.js"></script>
  <!-- CDN available -->
  <!-- <script src="http://cdn.sinanbolel.com/js/pano/pano.js"></script> -->
</head>

Add the required image width, height, src, and optional caption attributes to a <pano> element in your HTML:

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

Initialize all <pano> elements on the page:

<script type="text/javascript">
  const panoPage = new Pano.Page('pano');
  panoPage.init();
</script>

Special Thanks

Prescott Prue - Webpack implementation, tests, coverage

Package detail

pano

readme