HTML

Показать пользовательский HTML:

<div class="fotorama" data-width="500" data-height="281">
 <div class="any" style="background: rgba(255, 0, 0, .1);">One</div>
 <div class="any" style="background: rgba(0, 255, 0, .1);"><strong>Two</strong></div>
 <div class="any" style="background: rgba(0, 0, 255, .1);"><em>Three</em></div>
</div>

Работа со ссылками, divs, таблицами, абзацами и т. д. Напишите CSS для встроенных блоков.

Пример CSS:

.fotorama .any {
 text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 font-family: Georgia, serif;
 font-size: 72px;
 text-align: center;
 height: 181px;
 padding-top: 100px;
 }

Пример пользовательского HTML (в новом окне):

Выбираемый текст

Выделять текст с помощью класса fotorama__select:

<div class="fotorama" data-width="500" data-height="281">
 <div class="fotorama__select any" style="background: rgba(255, 0, 0, .1);">One</div>
 <div class="fotorama__select any" style="background: rgba(0, 255, 0, .1);"><strong>Two</strong></div>
 <div class="fotorama__select any" style="background: rgba(0, 0, 255, .1);"><em>Three</em></div>
</div>

Пример текста с возможностью выбора (в новом окне):

Эскизы

Чтобы определить эскиз для такого кадра, используйте data-thumb:

<div class="fotorama" data-nav="thumbs">
 <div data-thumb="1_thumb.jpg">One</div>
 <div data-thumb="2_thumb.jpg"><strong>Two</strong></div>
 <div data-thumb="3_thumb.jpg"><em>Three</em></div>
</div>

Если вам нужно, чтобы каждый эскиз имел свое собственное соотношение сторон, установите data-thumbratio для каждого кадра:

<div class="fotorama" data-nav="thumbs">
 <div data-thumb="1_thumb.jpg" data-thumbratio="144/96">One</div>
 <div data-thumb="2_thumb.jpg" data-thumbratio="64/128"><strong>Two</strong></div>
 <div data-thumb="3_thumb.jpg" data-thumbratio="1"><em>Three</em></div>
</div>

Изображения

Объединить с изображениями fotorama с помощью data-img:

<div class="fotorama" data-width="500" data-height="281" data-fit="cover">
 <div data-img="/images/1.jpg" class="any inverse">One</div>
 <div data-img="/images/2.jpg" class="any inverse"><strong>Two</strong></div>
 <div data-img="/images/3.jpg" class="any inverse"><em>Three</em></div>
</div>

CSS:

 .fotorama .any {
 text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 font-family: Georgia, serif;
 font-size: 72px;
 text-align: center;
 height: 100%;
 box-sizing: border-box;
 padding-top: 100px;
 line-height: normal;
 }

 .fotorama .inverse {
 color: #fff;
 text-shadow: 0 1px 0 #000;
 }

Пользовательский HTML с изображениями fotorama (в новом окне):