Custom data example

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/fotorama.js"></script>
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://s.fotorama.io/nyc/">
    
<!-- Fotorama -->
<div class="fotorama" data-width="100%" data-ratio="500/333" data-fit="cover" data-nav="thumbs" data-auto="false" data-allowfullscreen="false">
    <img src="http://s.fotorama.io/nyc/streetlook.jpg" data-author="Alexei Lebedev" data-title="Streetlook" />
    <img src="http://s.fotorama.io/okonechnikov/1-lo.jpg" data-author="Andrey Okonechnikov" data-title="Alpen Fog" />
</div>
    
<p class="fotorama-caption"></p>

SCSS

body {
    margin: 10px;
    background: #1d1d1d;
}

.fotorama,
.fotorama-caption {
    width: 500px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.fotorama-caption {
    text-align: center;
    line-height: 1.5;
    color: #838484;
    font-family: Georgia, serif;
    strong {
        font-weight: normal;
        color: #eee;
    }
}

JavaScript

$('.fotorama')
  .on('fotorama:show', function (e, fotorama) {    
    fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
    var activeFrame = fotorama.activeFrame;
    fotorama.$caption.html(
      '<strong>' + activeFrame.title + '</strong><br>'
      + activeFrame.author
    );
  })
  .fotorama();