Edit in JSFiddle

<!-- 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="500" data-max-width="100%" data-ratio="500/333" data-fit="cover" data-captions="false" data-auto="false">
    <img src="streetlook.jpg" data-caption="Streetlook" />
    <img src="acapella.jpg" data-caption="Acapella" />
    <img src="freakout.jpg" data-fit="contain" data-caption="Freakout" />
    <img src="eyes.jpg" data-caption="Eyes" />
    <img src="lift-dude.jpg" data-caption="Lift dude" />
</div>
    
<p class="fotorama-caption"></p>

<!-- © -->
<br>    
<p>Photos <a href="http://alexeilebedev.com/">by Alexei Lebedev</a></p>
$('.fotorama')
    .on('fotorama:show', function (e, fotorama) {    
        fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
        fotorama.$caption.text(fotorama.activeFrame.caption);
    })
    .fotorama();
body {
    margin: 10px;
}