Миниатюры

Измените стиль навигации с точек в стиле iPhone на эскизы, добавив data-nav="thumbs":

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

Для более эффективной работы с эскизами подготовьте изображения меньшего размера и включите их в HTML. Вот так:

<div class="fotorama"
 data-nav="thumbs">
 <a href="/images/1.jpg"><img src="/images/1_thumb.jpg"></a>
 <a href="/images/2.jpg"><img src="/images/2_thumb.jpg"></a>
 <a href="/images/3.jpg"><img src="/images/3_thumb.jpg"></a>
 <a href="/images/4.jpg"><img src="/images/4_thumb.jpg"></a>
 <a href="/images/5.jpg"><img src="/images/5_thumb.jpg"></a>
 <a href="/images/6.jpg"><img src="/images/6_thumb.jpg"></a>
 <a href="/images/7.jpg"><img src="/images/7_thumb.jpg"></a>
 <a href="/images/8.jpg"><img src="/images/8_thumb.jpg"></a>
</div>

Пример эскизов (в новом окне):

По умолчанию эскиз - квадрат 64 × 64. Откорректируйте это с помощью data-thumbwidth и data-thumbheight.

Если вам нужно, чтобы каждый эскиз имел свое собственное соотношение сторон, задайте width и 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>

В этом случае высота будет 64 пикселя или то, что вы установили в data-thumbheight, а ширина будет произвольной.

Fotorama автоматически генерирует отсутствующие эскизы.