360 Panorama Viewer with HTML5 & jQuery

The “pano.js” is a lightweight solution to create a 360 Panorama Viewer with HTML5 and jQuery. The plugin comes with a built-in touch function to swipe an image with both mouse and finger swipe. Besides this, it also provides the next and previous buttons to slide the panorama scene with a smooth transition effect.

Basically, the plugin comes with a few configuration options however it can be customized with additional CSS. Anyhow, you can set the basic settings through plugin options like image URL, moving speed, etc.

Inside your panorama viewer, you can set internal or external image URL to render in 360 panorama viewer. The working of this image viewer is just like the other jQuery image slider plugins to slide the image. Only the difference is that it slides the scene of the image in 360 degrees.

How to Create a 360 Panorama Viewer

First of all, load the jQuery JavaScript library and pano JS plugin file into the head tag of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Pano JS -->
<script src="jquery.pano.js"></script>

After that, create a div element with a unique id and define its class name as “pano”. Inside this div, create a child div element as a container and place a tag for controls buttons as follows:

<div id="myPano" class="pano">
   <div class="controls">
    <a href="#" class="left">«</a>
    <a href="#" class="right">»</a>
   </div>
</div>

Now, define the CSS styles for the panorama viewer as described below. You can set the custom value for CSS properties if you want to customize the panorama viewer. Like, you can control the size with the CSS width and height property and set the custom color, size, and position for the control (next/previous) buttons.

    .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;
    }

Finally, call the plugin in jQuery document ready function to activate the panorama viewer. The “img” configuration option gets the path URL of the image to render in the 360 panorama viewer. You can place the internal or external path URL of the image in this option.

    <script>
    /* jshint jquery: true */
    jQuery(function($){
        $("#myPano").pano({
            img: "./sphere.jpg",
        });
    });
    </script>

That’s all! I hope you have successfully implemented this jQuery plugin into your project to create HTML5 360 panorama viewer. If you need any further help related to this plugin, feel free to comment below.