如何从“a href”超链接启动 LightBox 画廊答案

【问题标题】：How to launch a LightBox gallery from an 'a href' hyperlink如何从“a href”超链接启动 LightBox 画廊
【发布时间】：2012-10-22 06:17:11
【问题描述】：

Stack Overflow 提供了一些非常有用的提示：运行多个 LightBox 画廊等，但我还有一个问题希望你们能提供帮助......

在静态 HTML 页面中，我有一个用户单击以启动 LightBox 库的图像；非常简单的东西，就像常规的 LightBox 演示一样。

但是，我想在实际显示“单击此处查看图库”的图片下方添加一个“a href”按钮（对于那些可能不知道他们需要单击图片以启动图库等的用户） )。

您能否告诉我基本的“a href”按钮在单击后立即启动 LightBox 库需要什么代码？

非常感谢

【问题讨论】：

使用：文字
非常感谢！如果该按钮是一个 CSS 格式的按钮（例如，一个 40 像素宽、蓝色背景等的基本 CSS 按钮）而不是使用实际的 JPG 按钮，这是否也有效？我是否只使用“a href”中的 CSS DIV/Class 而不是使用“images/images-1.jpg”路径？
标记内的内容并不重要，因此请确保一切正常。也考虑支持我的评论。
再次感谢@SoonDead。如果我在一页上有三个灯箱画廊怎么办，a href 按钮如何知道要启动哪个画廊？所有三个画廊都使用 rel="lightbox" 标签，所以页面上的第一个按钮不会同时启动所有三个画廊吗？我可以为每个画廊使用一个唯一的 rel 标识符，我可以用每个按钮来统计它吗？另外，我如何对您的评论进行投票？
评论左侧有一个向上的箭头。如果您单击它，则将评论标记为有用。我也准备了一个答案。如果你喜欢它，你可以点击左侧的复选标记接受它。

标签： javascript lightbox href

【解决方案1】：

如果您阅读了灯箱网站上的How to use 部分，您可以看到重要的内容：

rel="lightbox" 属性。这意味着该链接应该作为灯箱叠加层中的图像打开，因此标记内的内容无关紧要。

还有一个关于对这些链接进行分组的示例：

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

请注意，rel="" 属性已更改。灯箱后面有一个 [groupname] 部分。具有相同组名的链接将在一个库中打开。

如果您对 javascript 知之甚少，这种不显眼的 lightbox2 方法很有效。不需要写一行javascript代码只用rel属性。

【讨论】：