twitter-bootstrap - 灯箱 - 多张图片

Question

我正在使用 bootstrap-lightbox以便在页面中显示某些图像。

<a href="#lightbox" class="thumbnail">
  <img src="/img/img1_thumb.png" />
</a>
<a href="#lightbox" class="thumbnail">
  <img src="/img/img2_thumb.png" />
</a>

<div id="lightbox" ...>
  <div class='lightbox-header'>
    <button type="button" class="close" ...>&times;</button>
  </div>
  <div class='lightbox-content'>
    <img src="/img/img1.png" />
  </div>
</div>

我只需要显示被点击的缩略图的完整版本。

是否有一种lightbox方法可以在打开模式之前更新lightbox-content的img？

或者我应该添加如下内容:

$('.thumbnail').click(function () {
    $('#lightbox .lightbox-content img')
        .attr('src', $(this).attr('data-imagefull'));
});

?

---

更新

我并没有尝试自动生成完整的图像路径。
我只是不知道在哪里指定这个完整的图像路径。

Answer 1

最简单的方法是查看插件的源代码。看起来，它有自己的定义:https://github.com/jbutz/bootstrap-lightbox/blob/master/js/bootstrap-lightbox.js#L318

您可以使用'data-image' 属性使灯箱更新其内容。最简单的方法可能是编写一个小脚本来获取所有带有灯箱 ID 的图像，并将数据图像属性设置为文件名中没有“_thumb”的内容(例如通过正则表达式)