PanoramAh: Version Two

August 25, 2010

Last week I put together a quick script to display a panorama I took in Colorado.

It was a one-off script and I didn’t think much of it until Naina Redhu left a comment asking about using it for multiple panorama’s.

Well, why not?

It didn’t take much to tweak it into a full fledged jQuery plugin. I just took the bit that made the panorama and tweaked it to use local references. While I was at it I removed the requirement for a pre-loader image in the markup. Have a look.

Using it is pretty easy too, just set up your HTML like so:

Then make a collection and call panoramah() on it:

There’s a demo available here and you can keep up with any changes at Github.

Categories: Geek
Tags: , ,

Comments

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

  2. My favorite thing about you is how you build something simple and release it as open source, and then inevitably end up making it rich and robust because someone asks you for an improvement.

    You amaze me Mr. John. Unfortunately, since I suck at photography and never take any pictures, a panorama plugin is worthless to me. More unicorns! Less pictures! ;)

  3. john says:

    I can’t help it, I like to make Internet friends!

    As for the photography, I cheated. My wife has a photography degree so we bought this big fancy camera. I use it on “auto” mode and it makes it look like I’m competent :-)

  4. […] The best sunset I’ve seen in the last six months since I moved to this apartment! The sky never looked this beautiful and I spent about 45 minutes trying to capture it on my Nikon D90 using both the 18-55 and the 55-200 mm lenses. Images with a “panorama” in the top left corner are scrollable versions – move your mouse left and right to view the entire panorama. The lovely lightweight jQuery script was edited and written by John Hobbs @jmhobbs and the script can be found here. […]

  5. Daniƫl says:

    Thanks for this script. I have implemented it on my photography website.
    Cheers!

  6. Paolo says:

    Thanks! I have used your lightweight script on this page. It would be good to be able to put some transparent arrow(s) discreetly over a corner of the image so that people see that they can do something with the photo.

    Also the rel tag is not XHTML compliant. Is there another (compliant) way to pass the information the script needs?

  7. john says:

    Hi Paolo –

    You should be able to add the arrows with some CSS or just tweak the JS a little bit.

    As for using rel, I find XHTML compliance overrated personally :-) You could try packing it into the id field or something. Here are some thoughts on that I’ve come across: http://stackoverflow.com/questions/883599/on-jquery-metadata-and-xhtml-compliance

  8. Sandeep says:

    Wow! That is wonderful. I almost ditched my plans of including scrolling panoramas in my website and that’s when I found your site. This is so easy to implement even for someone who has no clue about scripts.

    Could you tell me how to tweak the code to include an (only) vertical panorama?

    Thanks a ton!

  9. john says:

    Interesting thought Sandeep, I hadn’t anticipated vertical panoramas!

    I’ve gone ahead and modified the code to support them. You have to use a different selector for vertical ones, but it’s working for me.

    https://github.com/jmhobbs/PanoramAh/commit/d18c148

    Let me know if you have any problems!

  10. rwon says:

    I have uploaded this script, but the images did not show.

    http://www.Singaporegallery.com/panorama/panoramah.html

    Did I do anything wrong?
    Any help would be appreciated. Many thanks.

  11. john says:

    @rwon Hey! I went to look but your page isn’t there any more. Did you get it working? Let me know if you need any help!

  12. […] The best sunset I’ve seen in the last six months since I moved to this apartment! The sky never looked this beautiful and I spent about 45 minutes trying to capture it on my Nikon D90 using both the 18-55 and the 55-200 mm lenses. Images with a “panorama” in the top left corner are scrollable versions – move your mouse left and right to view the entire panorama. The lovely lightweight jQuery script was edited and written by John Hobbs @jmhobbs and the script can be found here. […]

Leave A Comment

Your email will not be published.