Simple jQuery Panorama Viewer with Touch Swipe Support
File Size: | 509 KB |
---|---|
Views Total: | 16422 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight and simple to use plugin that embeds a panorama image and uses jQuery/CSS3 to scroll & loop it around horizontal 360° with mobile/touch support.
See also:
How to use it:
1. Include the jQuery javascript library in the head section of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Include the jQuery panorama view plugin's stylesheet and script files after jQuery library.
<script type="text/javascript" src="jquery.panorama_viewer.js"></script> <link href='panorama_viewer.css' rel='stylesheet' type='text/css'>
3. Add a panorama image on your web page.
<div class="panorama"> <img src="1.jpg"> </div>
4. Call the plugin after document ready.
<script> $(document).ready(function(){ $(".panorama").panorama_viewer(); }); </script>
5. Optional settings.
<script> $(document).ready(function(){ $(".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 }); }); </script>
This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.