jQuery Reel Example

360° Panorama Example

Photographed place can be spinned 360° using mouse drag or mouse wheel.

jQuery Reel plugin using latest jQuery aided by additional jQuery plugins:

Brandon Aaron's jQuery Mousewheel [local mirror]
James Dempster's jQuery DisableTextSelect [local mirror]


      
  <!DOCTYPE html>
  <html>
      <head>
          <script src='http://code.jquery.com/jquery-latest.min.js'></script>
          <script src='jquery.reel-min.js'></script>
          <script src='inc/jquery.disabletextselect-min.js'></script>
          <script src='inc/jquery.mousewheel-min.js'></script>
      </head>
      <body>
          <img id='image' src='panorama.jpg' width='200' height='150' />
          <script>
              $(document).ready(function(){
                  $('#image').reel({
                      frames: 32,
                      footage: 4,
                      sensitivity: 70,
                      saves: true 
                  });
              });
          </script>
      </body>
  </html>

Plugin uses src and width & height dimensions of #image. It then looks into panorama.jpg's folder and automatically chooses another image named panorama-reel.jpg for Reel interactions.

More about Reel plugin The world's first JavaScript projector of 360° panoramic images