Insert Panorama Images into WebPages using jQuery

Panorama photos are wide angle photos which display 180 degrees to 360 degrees of physical views. Panorama photos are usually 8640 x 1881 pixels in size. I personally love to click panorama photos and share them.

Panorama photos are too big to embed into a webpage, because of their large sizes. If you try to insert a photo into a webpage either the photo will be too small or it will overflow.

If you want to insert a Panorama into your webpage then you can take advantage of jQuery. TouchPan is a jQuery script that allows you to insert Panorama photos into webpages.

Using TouchPan to Display Panorama Photos

Before proceeding further download TouchPan source files and upload to your server or dropbox.

Now add the following code before </head>

<script src="yourfiles/jquery.js"></script>
 <script src="yourfiles/jquery.imagesloaded.js"></script>
 <script src="yourfiles/jquery.jgestures.js"></script>
 <link rel="stylesheet" href="yourfiles/jquery.touchpanview.css">
 <script src="yourfiles/jquery.touchpanview.js"></script>
  
 <script type="text/javascript"> 
  $(document).ready(function(){
   $('#panorama img').touchPanView({
    width:  Image_Width, 
    height: Image_Height, 
    startZoomedOut: true 
   }); 
  });
 </script> 

In the code above replace yourfile with the directory link of the folder containing all your JavaScripts. Also replace Image_Width and Image_Height with the width and height of the image display box respectively.

Now, add the code given below at the location where you want your Panorama Image to be displayed.

<div id="panorama"> 
  <p>
    <img src="URL_OF_YOUR_IMAGE" alt="Panorama" width="1024" height="768" />
  </p> 
</div> 

In the code above replace URL_OF_YOUR_IMAGE with the URL of your Panorama Image and replace the width and height attributes with those of your image.

You are now done. If you want to see a demo see this. [link]