Question

可以添加第二个字幕块吗？

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

Answer 1

此代码执行相同的操作可能会对您有所帮助。

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

我建议使用＆＃34;自定义HTML＆＃34;阻止： http://fotorama.io/customize/html/#selectable-text

这样你就可以把任何东西放在你的幻灯片中。

Fotorama滑块上的附加字幕div

2 个答案: