PanoramAh: A jQuery Panorama Viewer

August 18, 2010

Update (2010-08-25)

New version that supports multiple panorama’s on a page, check it out here.

As I have recently made some panoramas with Hugin I needed a solution for displaying them on the web. I searched around a bit and found this one from Gaya Designs.

I liked the clever technique for scrolling linked to the mouse via the background-position, but I didn’t care for the Prototype dependency or the rather large and feature-full script.

Taking that into consideration I whipped up my own viewer based on the same principles that used jQuery.

The Markup

The markup is dead simple. A class to identify the container, a little loading message and an img tag to preload into. I used the rel attribute on the container to carry the image URL and the width of the image. Height of the container should be set to the height of the panorama, width can be anything you like.


The JavaScript

Again, pretty super easy. I’ll let the code speak for itself.

var PanoramAh = {
  init: function () {
    // Get the element
    el = $( ".panorama" );
    // Extract the relevant data from the rel attribute
    panorama_width = el.attr( 'rel' ).split( ':' )[0];
    panorama_url = el.attr( 'rel' ).split( ':' )[1];
    // Get the preloader
    img = el.find( '.preload' )
    // Setup the onload callback
      function () {
        // Set the background to the image
        el.css( 'background', "transparent url( '" + panorama_url + "' ) no-repeat" );
        // Clear out the loading crap
        el.html( "" );
        // Set up the mouse monitoring
          function ( event ) {
            // Get the offset
            offset = Math.floor( ( panorama_width - el.width() ) * ( ( event.pageX - el.offset().left ) / el.width() ) )
            // Mind the overflows
            if( offset <= panorama_width - el.width() ) { el.css( 'background-position',  '-' + offset + 'px 50%' ); }
    // Start the loading process
    img.attr( 'src', panorama_url );

The Demo

It works for me in Firefox and Chrome. YMMV.

Check it out!


  1. Naina Redhu says:

    Hey John,
    Thank you for posting this. I’ve been struggling with the jQuery script I found on Gaya’s websites – it wasn’t working for me and after some help from a geek friend, I got it working. But then it didn’t show anymore than one panorama on one page – so if I try to load more than one, the second one’s just a static cropped image.

    Does the fresh script that you’ve written allow for more than one panorama to show on the same page? I’ve tried to integrate the Gaya script on my WordPress blog – you can see it here if you’d like :

    I am definitely looking for improvement to the original script but I’m tired trying to tweak it and hence a tad apprehensive about trying a fresh one – hence am asking beforehand :D Considering I’m no geek, it’s quite confusing.

    Your script does seem a whole lot simpler and lighter.

    EAGERLY awaiting your comments / tips!

    Thank you John,
    Now also following you on Twitter :)

  2. […] week I put together a quick script to display a panorama I took in […]

Leave A Comment

Your email will not be published.