jquery - Lightbox2 - 多张图片，一键点击

Question

我目前正在使用 Lightbox 2 (http://lokeshdhakar.com/projects/lightbox2/)，一切正常，但我需要稍作调整。

单击缩略图时，我想垂直显示所有图像。因此，如果我有 3 张图像都使用相同的 rel="lightbox[whatever]" 我希望它们都输出。我不想要带有 next 和 prev 按钮的“Image 1 of 5”。

我到处搜索，找不到解决方案。如果有人有任何想法、片段或外部 URL，将不胜感激。

代码示例：

<a href="resources/images/ClassicCarriers/ClassicCarriers1.jpg" rel="lightbox[classicCarriers]" title="">
    <img src="Resources/Images/classicCarriers_grey.jpg" class="recentWork" title="Classic Carriers" alt="Classic Carriers"/>
</a>
<a href="resources/images/ClassicCarriers/ClassicCarriers2.jpg" rel="lightbox[classicCarriers]" title=""></a>
<a href="resources/images/ClassicCarriers/ClassicCarriers3.jpg" rel="lightbox[classicCarriers]" title=""></a>

Answer 1

试试花哨的盒子。不要将效果直接附加到图像，而是将其附加到包含三个图像的 HTML。

Answer 2

您也可以使用http://www.jacklmoore.com/colorbox来实现您想要的。检查以下代码

HTML

<div id="container">
    <img src="http://placekitten.com/100/100" width="100px">
    <img src="http://placekitten.com/100/100" width="100px">
    <img src="http://placekitten.com/100/100" width="100px">
</div>  

jQuery

$(function(){
    $('#container img').click(function(e){
      e.preventDefault();
      $.colorbox({
        href: '#container',
        inline: true
     });    

  });
}); 

现在，当您单击任何图像时，所有 3 个图像都将显示在颜色框中。

工作小提琴
</p>

​