如何让jquery lightbox从一个链接打开多个图像?

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

使用像ColorBox或jQuery lightbox插件这样的lightbox，如何创建一个打开图库/图像数组的链接?

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.

例如，我有一个缩略图，当用户单击它时，我希望它在lightbox中打开多个图片，以便用户可以单击next或before来查看该库中的所有图片。

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?

我的想法是，我只是将它作为普通的1链接到1的图片，然后使用jquery隐藏所有的链接，除了第一个链接。一定有更好的办法吗?

Thanks.

谢谢。

5 个解决方案

#1

Here is the proper (and more efficient) solution:

这里有一个合适的(更有效的)解决方案:

HTML:

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:

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.

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

#2

Using jQuery Lightbox Plugin, the example code says to do the following:

使用jQuery Lightbox插件，示例代码说明如下:

$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});

That makes all the links open a lightbox and it should have the Next/Back links to browse through the gallery. Is that what you're looking for?

这使得所有的链接都打开一个lightbox，并且它应该有下一个/下一个链接来浏览这个库。这就是你要找的吗?

(The example is available here: http://leandrovieira.com/projects/jquery/lightbox/#example)

(这里有一个例子:http://leandrovieira.com/projects/jquery/lightbox/#示例)

#3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

So:

所以:

rel="lightbox[renovation]"

#4

I might be misunderstanding, but I'm getting the impression you want to do more than the "grouped photo" style gallery that ColorBox offers. I'm not quite sure on the next/previous functionality you're describing, but my thought would be to write this functionality without ColorBox initially.

我可能是误会了，但我的印象是，你想做的不仅仅是ColorBox提供的“分组照片”风格的画廊。我不太确定您所描述的下一个/之前的功能，但我的想法是最初编写这个功能时不使用颜色框。

Add your viewing gallery to a normal div within the page. When you've setup the gallery and its behavior to your liking, you can call ColorBox inline on your div(showing your newly created control within the popup).

将查看图片库添加到页面中的普通div中。当您按照自己的喜好设置了库及其行为之后，您可以在div中内联地调用ColorBox(在弹出窗口中显示新创建的控件)。

#5

sounds like you might want to use a different plugin. PrettyPhoto is great for galleries.

听起来你可能想使用一个不同的插件。漂亮的照片对画廊来说很好。

#1