Javascript 是否可以对多张图像进行灯箱化，但只显示一张图像来激活它们？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2755631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to lightbox many images but only show one image to activate them?
提问by Obay
I'm using Lightbox to display photos. So If I have two categories of photos, "work" and "vacation", I would do...
我正在使用 Lightbox 来显示照片。所以如果我有两类照片，“工作”和“假期”，我会做...
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[work]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>
This displays 6 images, and when I click one of them, it starts the Lightbox.
这将显示 6 张图像，当我单击其中一张时，它会启动灯箱。
However, I'd like to be able to display only two images initially (one for 'work', one for 'vacation'), but when one of them is clicked, it behaves like the first example, e.g. display all photos in that category through Lightbox.
但是，我希望最初只能显示两个图像（一个用于“工作”，一个用于“假期”），但是当单击其中一个图像时，它的行为与第一个示例类似，例如显示其中的所有照片通过灯箱分类。
Is this possible? If so, how?
这可能吗？如果是这样，如何？
Any help is very much appreciated! :)
很感谢任何形式的帮助！:)
Thanks
谢谢
采纳答案by icio
If you simply don't put anything in the node value of the anchor they don't show up, though you may wish to make sure there isn't any whitespace between these empty anchors in-case the whitespace shows up.
如果您只是没有在锚点的节点值中添加任何内容，它们就不会出现，尽管您可能希望确保这些空锚点之间没有任何空格，以防出现空格。
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]"></a>
<a href="images/image-3.jpg" rel="lightbox[work]"></a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #2</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]"></a>
<a href="images/image-6.jpg" rel="lightbox[vacation]"></a>
回答by EAMann
Add a css class to the second and third image in each category to hide it from the browser. For example:
向每个类别中的第二个和第三个图像添加一个 css 类以将其隐藏在浏览器中。例如：
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a class="hidden" href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a class="hidden" href="images/image-3.jpg" rel="lightbox[work]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a class="hidden" href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a class="hidden" href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>
Then add to your css file:
然后添加到您的 css 文件中：
a.hidden{display:none;}
a.hidden{display:none;}
回答by tina martin
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>
