README
Pano.js
Easily add multiple Panolens.js 360-panoramic viewers to a page
demo
> View the- Implements
PanoElement
andPanoPage
- 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