Simple jQuery Panorama Viewer with Touch Swipe Support

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:

• Virtual Tour - Simple Panorama Viewer Plugin
• Cyclotron - 360°Panorama Image Display Plugin

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.