Examples

Non-Looping Stitched Panorama

Greg Miernicki

Chicago Waterfront
Foster Beach
Montrose Beach
Lakefront Trail
    <img src="chicago.jpg" width="270" height="150"
      class="reel"
      id="image"
      data-image="chicago-reel.jpg"
      data-stitched="1072"
      data-steps="30"
      data-step="13"
      data-loops="false"
      data-speed="-0.1"
      data-timeout="1">

And the annotations:

    <div class="reel-annotation"
      id="waterfront"
      data-x="430"
      data-y="120"
      data-for="image">
      Chicago Waterfront
    </div>
    
    <div class="reel-annotation"
      id="foster_beach"
      data-x="700"
      data-y="80"
      data-for="image">
      Foster Beach
    </div>
    
    <div class="reel-annotation"
      id="montrose_beach"
      data-x="90"
      data-y="70"
      data-for="image">
      Montrose Beach
    </div>
    
    <div class="reel-annotation"
      id="lakefront_trail"
      data-x="850"
      data-y="75"
      data-for="image">
      Lakefront Trail
    </div>

Some text ballast to make the page positively scroll-worthy for testing purposes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum semper imperdiet. Integer non auctor orci. Nullam dictum pretium metus, interdum congue sapien lobortis in. Donec sed massa a tellus dapibus auctor et in mauris. Curabitur adipiscing fermentum felis vel molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut semper sem ut nulla fringilla luctus. Curabitur dignissim quam ac libero consequat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Nunc sed lectus eget magna suscipit tempor eget id nibh.