Additional caption div on Fotorama slider

Question

Is possible add a second captions block?

We like anoter div allowing texts with css styles under the principal captions. How we can add this new field on the .js? The css styling is easy, but we dont know how add this new field.

Answer 1

I would suggest using "custom HTML" block for that: http://fotorama.io/customize/html/#selectable-text

This way you could put anything inside your slide.

Answer 2

This code doing same thing may be it will help you.

 <!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://fotorama.s3.amazonaws.com/i/nyc/">

<!-- Fotorama -->
<div class="fotorama" data-width="100%" data-ratio="500/333" data-fit="cover" data-nav="false" data-auto="false">
    <img src="http://fotorama.s3.amazonaws.com/i/nyc/streetlook.jpg" data-author="Alexei Lebedev" data-title="Streetlook" />
    <img src="http://fotorama.s3.amazonaws.com/i/okonechnikov/1-lo.jpg" data-author="Andrey Okonechnikov" data-title="Alpen Fog" />
</div>

<p class="fotorama-caption"></p>

js code

$('.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();

demo jsffidle