Simple jQuery Panorama Viewer with Touch Swipe Support

File Size: 509 KB
Views Total: 16208
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

1. Include the jQuery javascript library in the head section of the page.

<script src=""></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">


4. Call the plugin after document ready.


5. Optional settings.

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

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.