JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q47627F
  • License MIT

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

Package Exports

  • pano

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pano) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pano.js

NPM version NPM downloads Build Status Dependency Status Code Climate Code Coverage License Code Style

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

> View the demo

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