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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
( function ( $ ) { $.fn.panoramah = function () { return this.each( function ( index ) { // Localize the element var photo = $( this ); // Extract the relevant data from the rel attribute var panorama_width = photo.attr( 'rel' ).split( ':' )[0]; var panorama_url = photo.attr( 'rel' ).split( ':' )[1]; // Get the preloader var img = $( "<img src='' />" ); // Setup the onload callback img.load( function () { // Set the background to the image photo.css( 'background', "transparent url( '" + panorama_url + "' ) no-repeat" ); // Clear out the loading crap photo.html( "" ); // Set up the mouse monitoring photo.mousemove( function ( event ) { // Get the offset offset = Math.floor( ( panorama_width - photo.width() ) * ( ( event.pageX - photo.offset().left ) / photo.width() ) ) // Mind the overflows if( offset <= panorama_width - photo.width() ) { photo.css( 'background-position', '-' + offset + 'px 50%' ); } } ); } ); // Start the loading process img.attr( 'src', panorama_url ); } ); } } )(jQuery); |
Using it is pretty easy too, just set up your HTML like so:
|
1 2 3 4 5 |
<div class="panorama" rel="4201:Panorama-Cropped.sm.jpg" style="height: 500px; width: 100%; border: 1px solid #444;"> Loading... </div> |
Then make a collection and call panoramah() on it:
|
1 |
$( '.panorama' ).panoramah(); |
There’s a demo available here and you can keep up with any changes at Github.
Comments
[…] New version that supports multiple panorama’s on a page, check it out here. […]
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! ;)
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 :-)
[…] 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. […]
Thanks for this script. I have implemented it on my photography website.
Cheers!
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?
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
OK, thanks!
Using an tag with style=”display:block;” preserves XHTML compliance and allows one to put a link on the image as well. That will do for me.
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!
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!
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.
@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!
[…] 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. […]