Tag: Panorama

PanoramAh: A jQuery Panorama Viewer

August 18, 2010 » Geek

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!

Making Panoramas With Hugin

August 17, 2010 » Consume, Geek, Life

We recently got back from a visit to Colorado and I had taken a few sets of photos that I intended to stitch into panoramas. This was new to me, but I figured it couldn’t be too hard, right?

With the help of Hugin, I figured right.

There is all sorts of cool tweaks you can do with Hugin, but I’m just going to touch on the basic process. There is a much more complete set of tutorials here.

The process boils down to these steps:

  1. Load Images
  2. Match Points
  3. Tweak Exposure (if you want)
  4. Render

Matching Points

Matching points is just a matter of clicking on a recognizable spot in one photo and then the matching spot on the next photo. You don’t have to be spot on, it will guess the right spot for you. Pretty cool. I did about four per photo pair.

Matching Points

Tweak Exposure

I used auto-exposure on my photos and, as a bonus, took a few pictures with direct sunlight. Not good for clean overlaps. Here’s my initial preview image.


Yuck, it’s all washed out and ugly. No problem, we can do some tweaking on the exposure tab and it should be all better.



Once everything is set up, rendering is a snap, it just takes a while.



Once it’s done (not more than a few minutes) you should have your panorama. It’s going to be big though, my un-cropped panorama was 14587×2416 and weighed in at a hefty 19 megs as a high quality JPEG. Wow.


Overall Hugin is a super-easy and fun way to make awesome panoramic photos with any digital camera.