Examples

Multi-Row Sequence

Matt Smith

First Row
Last Row
    <img src="mini.jpg" width="200" height="200"
      class="reel"
      id="image"
      data-images="mini/###.jpg"
      data-frames="20"
      data-frame="14"
      data-rows="6"
      data-row="3"
      data-speed="0.3">

And the two annotations:

    <div class="reel-annotation"
      id="first_row"
      data-start="1"
      data-end="20"
      data-x="10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105"
      data-y="10"
      data-for="image">
      First row
    </div>
    
    <div class="reel-annotation"
      id="last_row"
      data-start="101"
      data-end="120"
      data-x="105,100,95,90,85,80,75,70,65,60,55,50,45,40,35,30,25,20,15,10"
      data-y="175"
      data-for="image">
      Last row
    </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.