Thumbnails

Change navigation style from iPhone-style dots to thumbnails by adding data-nav="thumbs":

<div class="fotorama"
     data-nav="thumbs">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

For better performance with thumbnails, have smaller images ready and include them in HTML. Like so:

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>

Thumbnails example (new window):

By default, thumbnail is a 64×64 square. Adjust this with data-thumbwidth and data-thumbheight.

If you need to have each thumbnail had its own aspect ratio, set width and height:

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg" width="144" height="96"></a>
  <a href="2.jpg"><img src="2_thumb.jpg" width="64" height="128"></a>
</div>

In that case height will be 64 pixels or what you’ve set in data-thumbheight, and width will be arbitrary.

Fotorama automatically generates the missing thumbnails.