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-contents ？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

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

Answer 2

演示：- http://ashleydw.github.io/lightbox/ 你可以在这里找到你的解决方案。

Answer 3

如果您使用的是 .Net，您可以执行 PageMethod：

js：

$('.thumbnail').click(function () {

     PageMethods.loadimg(function (answer) {

        var images= answer.split('|');

        $('.lightbox-content').html(answer[0]);
        $('.lightbox-content').html(answer[1]);
        $('.lightbox-content').html(answer[...]);    

    }, Error);
});

CS：

[WebMethod]
public static string loadimg()
   {
   string images= "<img src="/img/img1_thumb.png" />|<img src="/img/img2_thumb.png" />|<img src="/img/img..._thumb.png" />";
   return images;
   }