360 Degree Panoramic Image Viewer with jQuery - Pano

Pano is a lightweight and touch-enabled jQuery plugin for creating a 360 degree panoramic image viewer with support for mouse drag, touch swipe, and left/right arrow controls.

See also:

• Virtual Tour - Simple Panorama Viewer Plugin
• jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
• Simple jQuery Panorama Viewer with Touch Swipe Support
• Cyclotron - 360°Panorama Image Display Plugin

How to use it:

1. Include jQuery library and the jQuery pano plugin in your Html page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.pano.js"></script>

2. Create the Html for the panoramic image viewer with controls.

<div id="myPano" class="pano">
  <div class="controls">
    <a href="#" class="left">&laquo;</a>
    <a href="#" class="right">&raquo;</a> 
  </div>
</div>

3. The required CSS to style the plugin.

.pano {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  cursor: move;
}

.pano .controls {
  position: relative;
  top: 40%;
}

.pano .controls a {
  position: absolute;
  display: inline-block;
  text-decoration: none;
  color: #eee;
  font-size: 3em;
  width: 20px;
  height: 20px;
}

.pano .controls a.left { left: 10px; }

.pano .controls a.right { right: 10px; }

.pano.moving .controls a {
  opacity: 0.4;
  color: #eee;
}

4. Call the plugin on the container you just created and embed a 360 degree panoramic image using 'img' option.

$(document).ready(function(){
  $("#myPano").pano({
    img: "1.jpg"
  });
});

Changelog:

v1.3.0 (2020-11-04)

• Update

2015-03-04

• update

2014-08-01

• update

2014-07-28

• fix indentation

---

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