灯箱 - 多张图片

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

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

Answer 2

如果您正在使用.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; 
    } 

Answer 3

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