360 Degree Panoramic Image Viewer with jQuery - Pano

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

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> 

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.

    img: "1.jpg"


v1.3.0 (2020-11-04)


  • update


  • update


  • fix indentation

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