“A good snapshot keeps a moment from running away.”
— Eudora Welty
AT2012 Panorama Photos describes how to stitch photos into panoramic views. The resulting photos may have more pixels than your computer monitor, so today we show how a web viewer may allow you to scroll and zoom within the panorama. For each of these panoramas, view by clicking the full-screen control and click-drag to move around and use the mouse scroll-wheel to zoom in and out.
The Technical Details (tl;dr)
The low-tech way for simple very wide photos is to use an iframe, which allows a horizontal scroll bar for viewing.
Pretty crude, no initial centering of picture, unsatisfactory for most users.
Several free and open-source Flash-based viewers are available, which you can try out here. Be aware that some portable devices, such as the iPad, do not support Flash, so you may be excluding part of your audience. Fewer free choices are available using HTML5, but this should change eventually as more people transition to browsers using this standard.
I first tried pano, which is open source. One disadvantage is that when you scroll all the way to the left, the image wraps around.
The reason is that most web panorama viewers are built for 360-degree horizontal, 180-degree vertical photos. For use on the web, the term “panorama” is taken to mean full 360-degree spherical views, and partial panorama is a photo that is not intended to wrap all the way around. For stitching together photographs taken on the trail, we will almost always be dealing with partial panoramas.
Pan0 does not support partial panoramas, as far as I can tell. This guy outlines how he modified source code to support partials in a particular instance. I do not have the sdk to compile swf files, so went looking for another player.
Let us try out the Flash 9 based viewer Ryubin PanoPlayer5, which does support partial panoramas.
All the examples in documentation for Ryubin’s flash panorama player uses Javascript, which is a problem if you want to embed in a WordPress blog. With considerable trial and error, I figured out how to embed PanoPlayer5 using this object embed script, which you can also see by viewing the source for this web page.
<object width=”100%” height=”100%” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ bgcolor=”#DDDDDD”><param name=”allowFullScreen” value=”true” /><param name=”quality” value=”high” /><param name=”BGCOLOR” value=”#AAAAAA” /><param name=”src” value=”RyubinPanoPlayer5.swf?img_path=wp-content/uploads/2012/12/IMG_20120819_103026_stitch.jpg&playmode=flat&internal_ctrl=yes&fov=90&yaw=0&pitch=0&smooth=yes&limit_horizontal=yes&limit_vertical=yes&top_limit=+45&bottom_limit=+45″ /><param name=”allowfullscreen” value=”true” /><param name=”pluginspage” value=”http://www.macromedia.com/go/getflashplayer” /><embed width=”100%” height=”100%” type=”application/x-shockwave-flash” src=”RyubinPanoPlayer5.swf?img_path=wp-content/uploads/2012/12/IMG_20120819_103026_stitch.jpg&playmode=flat&internal_ctrl=yes&fov=90&yaw=0&pitch=0&smooth=yes&limit_horizontal=yes&limit_vertical=yes&top_limit=+45&bottom_limit=+45″ allowFullScreen=”true” quality=”high” BGCOLOR=”#AAAAAA” allowfullscreen=”true” pluginspage=”http://www.macromedia.com/go/getflashplayer” bgcolor=”#DDDDDD” /> </object>