Download
User Rating: 0/5 ( 0 votes)
jQuery Panorama Viewer helps you Embed interactive Panorama Pictures on your site with this simple plugin
It compatibes with modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. It had not tested this on IE.
1. INCLUDE STYLESHEET AND JAVASCRIPT
<link href='panorama_viewer/panorama_viewer.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="panorama_viewer/jquery.panorama_viewer.js"></script>
2. HTML
<body>
..
<div class="panorama">
<img src="your-panorama-1.jpg">
</div>
<div class="panorama">
<img src="your-panorama-2.jpg">
</div>
..
</body>
3. JAVASCRIPT
$(".panorama").panorama_viewer({
repeat: false,
direction: "horizontal",
animationTime: 700,
easing: "ease-out",
overlay: true
});
4. OPTIONS
-
repeat: If you have a perfect 360 panoramic photo and you want the user to be able to spin around without being bound by the photo’s dimensions, set this to true and the background will repeat forever. The default value is false.
-
direction: In case you have an awesome vertical 360 panoramic photo, you can set this option to vertical so that the viewer can scroll upward instead of sideward. The default value is horizontal.
-
animationTime: You can define how long the easing animation will last with this option. The option accepts values in milliseconds (without the unit ms). Change this to 0 if you want dragging to be instant. The default value is 700.
-
easing: You can define your easing option here. This option accepts the usual CSS3 transition timing function. Available options are "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". The default value is "ease-out".
-
overlay: In order to make the interaction clear to the user, I have added an overlay to indicate that this is a panoramic photo. If you want to turn this off, toggle this option to false. The default value is true.
JS Tutorial
