如何使一个jQuery的灯箱从一个链接打开多个图像？ [英] How to make a jquery lightbox open multiple images from one link?

问题描述

使用类似 ColorBox 或 jQuery灯箱插件我如何制作一个单独的链接来打开一个图库/图像数组？

例如，我有1个缩略图，当用户点击它时，我希望它在Lightbox中打开多张图片，以便用户可以点击下一张或上一张以查看所有图片在那个画廊里。

我的想法是，我只是把它作为正常的1链接到1张图片，然后使用jQuery来隐藏除第一个链接以外的所有链接。必须有更好的方法吗？

谢谢。

解决方案

是合适的（和更高效的）解决方案：

HTML：

b $ b

 < 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 灯箱会自动隐藏其余部分，然后在适当的时间显示每个图片。

Using a lightbox like ColorBox or jQuery Lightbox Plugin how can i make a single link which opens a gallery / array of images?

For example i have 1 thumbnail and when a user clicks it i want it to open multiple pictures in the lightbox so the user can click next or previous to view all the pictures within that gallery.

My thinking was that i just do it as normal 1 link to 1 picture then use jquery to hide all but the first link. There must be a better way?

Thanks.

解决方案

Here is the proper (and more efficient) solution:

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

Note: As you can see, simply list the anchor links to the other images you want to be apart of the gallery. No need to add images to the markup and then hide them with JS. The only image you will see in the markup example above is images/thumbnail-image1.jpg Lightbox will automatically hide the rest of them and then show each one at the appropriate time.

这篇关于如何使一个jQuery的灯箱从一个链接打开多个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！