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

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

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;
   }

灯箱 - 多个图像

3 个答案: