如何使jquery灯箱从一个链接打开多个图像？

Question

使用像ColorBox或jQuery Lightbox Plugin这样的灯箱,我如何制作一个单独的链接来打开图库/图像阵列？

例如,我有1个缩略图,当用户点击它时,我希望它在灯箱中打开多个图片,这样用户可以点击下一个或上一个查看该图库中的所有图片.

我的想法是,我只是将其作为正常1链接到1张图片,然后使用jquery隐藏除第一个链接之外的所有链接.肯定有更好的办法？

谢谢.

Answer 1

这是正确的(也是更有效的)解决方案:

HTML:

<div id='gallery'>
    <a href="images/big-image1.jpg">
        <img src="images/thumbnail-image1.jpg"/>
    </a>
    <a href="images/big-image2.jpg" ></a>
    <a href="images/big-image3.jpg" ></a>
    <a href="images/big-image4.jpg" ></a>
</div>

jQuery的/ JS:

$(document).ready(function() {
    $('#gallery a').lightBox();
});

注意:正如您所看到的,只需列出要与图库分开的其他图像的锚点链接.无需将图像添加到标记中,然后使用JS隐藏它们.您将在上面的标记示例中看到的唯一图像是images/thumbnail-image1.jpg Lightbox将自动隐藏其余图像,然后在适当的时间显示每个图像.