Question

我目前正在使用Lightbox 2（http://lokeshdhakar.com/projects/lightbox2/），这一切都正常，但我需要稍微调整一下。

我想在点击缩略图时垂直显示所有图像。所以，如果我有3张图片全部使用相同的rel =“lightbox [whatever]”我希望它们全部输出。我不希望“图像1的5”带有next和prev按钮。

我全身都搜索过，无法找到解决方案。如果任何人有任何想法，片段或外部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

试试fancy box。不要将效果直接附加到图像，而是将其附加到包含三个图像的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个图像都将显示在彩色框中。

Working Fiddle

Lightbox2 - 多个图像，一键

2 个答案: