fotorama - Fotorama 滑块上的附加标题 div

Question

是否可以添加第二个字幕块？

我们喜欢另一个 div 允许在主要标题下使用 css 样式的文本。我们如何在 .js 中添加这个新字段？css 样式很简单，但我们不知道如何添加这个新字段。

Answer 1

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

Answer 2

我建议为此使用“自定义 HTML”块：http: //fotorama.io/customize/html/#selectable-text

这样您就可以在幻灯片中放入任何东西。