https://github.com/peachananr/panorama_viewer
Embed panorama photos on your website with Panorama Viewer
https://github.com/peachananr/panorama_viewer
Last synced: 21 days ago
JSON representation
Embed panorama photos on your website with Panorama Viewer
- Host: GitHub
- URL: https://github.com/peachananr/panorama_viewer
- Owner: peachananr
- License: gpl-2.0
- Created: 2014-02-05T12:02:05.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2020-05-08T01:21:07.000Z (over 5 years ago)
- Last Synced: 2024-04-06T09:33:58.320Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://peachananr.github.io/panorama_viewer/demo/demo.html
- Size: 497 KB
- Stars: 473
- Watchers: 36
- Forks: 148
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - JQuery Panorama Viewer - 全景视图
- awesome-frontend - JQuery Panorama Viewer - 全景视图
- awesome-front-end - JQuery Panorama Viewer - 全景视图
README
#Panorama Viewer by Pete R.
Embed interactive Panorama Pictures on your site with this simple plugin.
Created by [Pete R.](http://www.thepetedesign.com), Founder of [Travelistly](http://www.Travelistly.com) and [BucketListly](http://www.bucketlistly.com)
[](http://www.thepetedesign.com/demos/panorama_viewer_demo.html)
## Demo
[View demo](http://peachananr.github.io/panorama_viewer/demo/demo.html)
## Compatibility
Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.
## Basic Usage
You can now display your panorama photos on your site with this plugin. To do this, first you have to include the latest jQuery library together with `jquery.panorama_viewer.js` and `panorama_viewer.css` into your document's ``. Now all you have to do this add your image to your HTML like this:
````html
...
````
Make sure to change the source of the image to your image and call the function as shown below:
````javascript
$(".panorama").panorama_viewer({
repeat: false, // The image will repeat when the user scroll reach the bounding box. The default value is false.
direction: "horizontal", // Let you define the direction of the scroll. Acceptable values are "horizontal" and "vertical". The default value is horizontal
animationTime: 700, // This allows you to set the easing time when the image is being dragged. Set this to 0 to make it instant. The default value is 700.
easing: "ease-out", // You can define the easing options here. This option accepts CSS easing options. Available options are "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". The default value is "ease-out".
overlay: true // Toggle this to false to hide the initial instruction overlay
});
````
Now you will be able to display your panoramic photos without having to rely on the global width of the website. I hope you will find this useful. Stay tuned for more updates.
If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr).
## Other Resources
- [Tutorial](http://www.onextrapixel.com/2014/02/20/embed-an-interactive-panoramic-photo-with-jquery-panorama-viewer/)