CANNON BEACH PANORAMA

Scroll right over the image to view.

A simple way to display a panoramic photo in a blog post or webpage

I couldn’t find a no-frills / no-plug-in / super simple way to display a panoramic photo with a bit of interactivity, so I wrote this. Tested on safari desktop and iOS, and handles retina images.


<div id="panoframe" style="height: 320px; width: 100%; overflow: auto; -webkit-overflow-scrolling:touch;">
  <div id="panocontainer" style="width: 3336px; height: 300px;">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="pano.jpg" srcset="pano@2x.jpg 2x" width="1668" height="300"></td>
        <td><img src="pano.jpg" srcset="pano@2x.jpg 2x" width="1668" height="300"></td>
      </tr>
    </table>
  </div>
</div>


You can repeat the image as many times as you want. In this case I have the image displayed twice and the width of panocontainer is 2x the width of the image.

About the image

This image was stitched together from several late night images at Cannon Beach, Oregon. The final stitch was over 20,000px wide. I processed it with Ozono Studio actions to get the paint effect.