光滑的灯箱使用图像标题作为标题

Question

我正在为灯箱使用光滑的灯箱。我正在使用这个库 http://mreq.github.io/slick-lightbox/demo/

<div class="portfolio-slides">
  <div class="single">
    <a href="http://placehold.it/300x300">
      <img src="http://placehold.it/300x300" title="abc1"/>
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/300x300/016243" >
      <img src="http://placehold.it/300x300/016243/" title="abc2"/>
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/300x300/db990b">
      <img src="http://placehold.it/300x300/db990b" title="abc3"/>
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/300x300">
      <img src="http://placehold.it/300x300" />
    </a>
  </div>
</div>
$('.portfolio-slides').slickLightbox({
  itemSelector        : 'a',
  navigateByKeyboard  : true,
  caption: 'caption'
});

如何在 slick lightbox 中使用图片标题作为标题？

Answer 1

您需要像这样插入标题：

<a href="http://placehold.it/300x300" data-caption="caption here"></a>

Answer 2

你能试试这里提供的 caption 选项 - http://mreq.github.io/slick-lightbox/ 吗？

我猜应该是这样的

$('.portfolio-slides').slickLightbox({
  itemSelector        : 'a',
  navigateByKeyboard  : true,
  caption: function(element, info) { return $(element).find('img').attr('title');} 
});

Answer 3

尝试caption: true

如果它显示 undefined 作为标题，使用 caption: 'caption'，它显示 data-caption 属性的值。

光滑的灯箱使用图像标题作为标题

Slick lightbox use image title as caption

javascript

jquery

slick.js