Panorama360

jQuery plugin for displaying 360° panoramic images
v1.1

Thank you for your purchase

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!

Installation

  1. Copy the css, images, js folders to your project and include the jQuery library + the plugin files inside the <head> tag of your page.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <link rel="stylesheet" href="css/panorama360.css" media="all" />
    <script type="text/javascript" src="js/jquery.panorama360.js"></script>
    <script>
      $(function(){
        $('.panorama-view').panorama360(); // initialize plugin
      });
    </script>
    
  2. Add the following markup inside the <body> tag of your page.

    <div class="panorama">
      <div class="panorama-view">
        <div class="panorama-container">
          <img src="panorama.jpg" data-width="4996" data-height="1300" />
        </div>
      </div>
    </div>
    

    You must explicitly specify the original image size with data-width and data-height as attributes. The standard width and height image attributes are ignored and should NOT be used.

Additional Note

It's recommanded to use a reset style before including the panorama360.css file. If you don't use this method (or your CSS framework does not include one) use something like this from the demo.css file:

html,body,div,span,h1,h2,h3,h4,h5,h6,p,img { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
html { overflow:auto; }
body { line-height:1;}
a { margin: 0; padding: 0; font-size: 100%;vertical-align:baseline;background:transparent; }
html,body { width:100%; height:100%; }
body { background-color: #999; }

Please refer to simple.html and fullpage.html examples for more details.

Configuration

Panorama360 can be customized easily using the options below.

Option Default Description
bind_resize true Determine if window resize affects the viewport, should be true for responsive designs.
use_preloader true Show a preloader for the panorama image while it loads.
is360 true Determine if panorama is rotated 360 degree, otherwise 180 degree is used.
sliding_controls false Determine if UI controls for sliding left and right are created.
sliding_direction 0 Determines the automatic sliding direction: 0 - no automatic slide effect, 1 - right side effect, -1 - left side effect.
sliding_interval 8 Determines the interval in miliseconds of the sliding timer (the lower it is the faster it slides).
start_position 0 Initial position for the view that must be between 0 and the images's width (in pixels).
mouse_wheel_multiplier 0 Set the speed of the mousewheel rotation (must include jquery.mousewheel.min.js script)
image_width - Specify the panorama image width (original as it is in the file) - if not set in the markup via the data-width attribute.
image_height - Specify the panorama image height (original as it is in the file) - if not set in the markup via the data-height attribute.
Make sure you check out the examples in the demos folder.

Adding hotspots

You can add hotspots to the image by linking a <map> element to the image (no plugin configuration required).

<div class="panorama">
  <div class="panorama-view">
    <div class="panorama-container">
      <img src="panorama.jpg" usemap="hotspots" data-width="4996" data-height="1300" />
      <map id="hotspots" name="hotspots">
        <area shape="rect" class="hotspot" coords="240,530,520,580" href="other-panorama.html" alt="This is a hotspot" />
      </map>
    </div>
  </div>
</div>

Fancybox Integration

Adding a third party plugin for viewing hotspot details might improve the panorama experience. Here is an example of adding fancybox to display images for hotspots:

$('.panorama .hotspot').fancybox({
    maxWidth   : 800,
    maxHeight  : 600,
    padding    : 0,
    fitToView  : true,
    width      : '90%',
    height     : '90%',
    autoSize   : false,
    closeClick : false
});

Please consult the original documentation of the fancybox plugin for more options and details. You can test things out by opening the fancybox-integration.html example in the demos folder.

carouFredSel Integration

If you need to select from multiple panoramas on a single page you might use a third party plugin to display a carousel with thumbnails and manage the swap when clicking for full view. Below is such an integration with the carouFredSel plugin.

$(function(){

  $('.panorama .panorama-view').panorama360();
     $('.panorama .slides .slide a').click(function(ev) {
       ev.preventDefault();
       if ($(this).hasClass('active')) return;
       $('.panorama .preloader').show();
       $('.slides .slide a').removeClass('active');
       $(this).addClass('active');
       $('.panorama .panorama-view').hide();
       $('.panorama .panorama-container').html($(this).next().html());
       $('.panorama .panorama-view').panorama360();
     });

  $('.panorama .slides-container').carouFredSel({
    direction: 'up',
    circular: false,
    infinite: false,
    height: '100%',
    padding: [100,0,100,0],
    items: { visible: 'variable', width: 100, height: 100, filter: '.slide' },
    scroll: { fx: 'directscroll', mousewheel: true },
    auto: false,
    prev: '.slides .up',
    next: '.slides .down'
  });

});

Please consult the original documentation of the carouFredSel plugin for more options and details. You can test things out by opening the caroufredsel-integration.html example in the demos folder.

Notes

If your browser doesn't have JavaScript enabled, the plugin fallbacks to show only a part of the panoramic image, which is ok. The plugin uses extensive image movement and if you notice flickering (especially in full-page mode) you can resize the input image to be smaller and play with the plugin options. The plugin manipulates 360 panoramic images and does not glue multiples slides into a big image (please see some examples here).

Final thought

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist.