HTML

Show custom HTML:

<div class="fotorama">
  <div>One</div>
  <div><strong>Two</strong></div>
  <div><em>Three</em></div>
</div>

Work with links, divs, tables, paragraphs and more. Write the CSS for embedded blocks yourselves.

Custom HTML example (new window):

Selectable text

Make text selectable with fotorama__select class:

<div class="fotorama">
  <div><span class="fotorama__select">One</span></div>
  <div><strong class="fotorama__select">Two</strong></div>
  <div><em class="fotorama__select">Three</em></div>
</div>

Selectable text example (new window):

Thumbnails

To define a thumbnail for such frame, use 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>

If you need to have each thumbnail had its own aspect ratio, set data-thumbratio for every frame:

<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>

Images

Combine with the fotorama images using data-img:

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

Custom HTML with the fotorama images (new window):