Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sbolel/pano
360-panoramic image viewer using Panolens.js
https://github.com/sbolel/pano
360 360-photo javascript javascript-library js pano panolens panorama panorama-image panoramic stereo-vision
Last synced: about 1 month ago
JSON representation
360-panoramic image viewer using Panolens.js
- Host: GitHub
- URL: https://github.com/sbolel/pano
- Owner: sbolel
- License: mit
- Created: 2016-06-07T21:11:54.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-01-05T13:31:37.000Z (12 months ago)
- Last Synced: 2024-10-05T16:48:57.585Z (3 months ago)
- Topics: 360, 360-photo, javascript, javascript-library, js, pano, panolens, panorama, panorama-image, panoramic, stereo-vision
- Language: JavaScript
- Homepage: https://sbolel.github.io/pano
- Size: 14.5 MB
- Stars: 59
- Watchers: 6
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Pano.js
[![Build Status][build-image]][build-url]
[![License][license-image]][license-url]
[![NPM version][npm-image]][npm-url]
[![Code Style][code-style-image]][code-style-url]
[![NPM downloads][npm-downloads-image]][npm-url]
_Add multiple [Panolens.js](https://github.com/sbolel/panolens.js) 360-panoramic viewers to a page with ease._
* Requires [Panolens.js](https://github.com/sbolel/panolens.js), which is based on [Panolens.js](https://github.com/sbolel/panolens.js) by [pchen66](https://github.com/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
```bash
# with yarn
yarn add pano
# with npm
npm install --save pano
```
Import Pano
```js
import * as Pano from 'pano'
```
* **Using the CDN**
Include scripts via CDN by adding them to your `index.html`:
```html
```
## Usage
1. Instantiate `Pano.Page` object
```js
/** 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 `` elemement HTML
Include the required `width`, `height`, `src`, `caption` (optional) attributes for the `` element(s) in your view:
```html
```
1. Initialize all `` elements on the page
```js
var panoPage = new Pano.Page('pano')
panoPage.init()
```
## Credits
* [prescottprue](http://github.com/prescottprue) - Webpack implementation, tests, coverage
* [pchen66](http://github.com/pchen66) - Original Panolens.js implementation
[npm-image]: https://img.shields.io/npm/v/pano.svg?style=flat-square
[npm-url]: https://npmjs.org/package/pano
[npm-downloads-image]: https://img.shields.io/npm/dm/pano.svg?style=flat-square
[build-image]: https://circleci.com/gh/sbolel/pano.svg?style=shield
[build-url]: https://circleci.com/gh/sbolel/pano
[daviddm-image]: https://img.shields.io/david/sbolel/pano.svg?style=flat-square
[daviddm-url]: https://david-dm.org/sbolel/pano
[climate-image]: https://img.shields.io/codeclimate/github/sbolel/pano.svg?style=flat-square
[climate-url]: https://img.shields.io/codeclimate/github/sbolel/pano.svg?style=flat-square
[coverage-image]: https://img.shields.io/codeclimate/coverage/github/sbolel/pano.svg?style=flat-square
[coverage-url]: https://img.shields.io/codeclimate/coverage/github/sbolel/pano.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/pano.svg?style=flat-square
[license-url]: https://github.com/sbolel/pano/blob/master/LICENSE
[code-style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[code-style-url]: http://standardjs.com/