<!-- 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; }