Question

我在jquery中使用fancybox lightbox插件。它挂钩到锚标签，以便下面的图像与使用rel =“example_group”引用的其他图像链接：

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();
   });
</script>

<body>
  <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a>
  <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a>
</body>

我想在弹出式图库中添加其他图片，但我不想在链接被点击之前将它们包含在页面上。所以现在，正在显示两个图像然后链接。例如，我想挂钩第三张图片而不在身体中明确显示它。

我尝试了以下内容：

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();

      $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>").appendTo("body");
   });
</script>

这会将第三张图像挂钩到图库中，但也会在正文中显示图像。所以我尝试了appendTo部分：

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();

      $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>");
   });
</script>

但是这个添加的元素似乎与rel组无关，只有两个图像被链接在一起。

如何添加新的锚元素并将其挂钩到.fancybox调用而不必将引用附加到正文？我假设这个问题与特定的fancybox代码足够独立。这似乎只是充足的jquery专业知识。

Answer 1

我对.fancybox()并不是很了解，但是你可以尝试一下这个想法。

将您不想在页面上显示的图像放在隐藏的容器中。它们在页面上不可见，但我想它们会在fancybox中。

HTML

<body>
    <div id='hiddenContainer' style='display:none;'></div>

    <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a>
    <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a>
</body>

在jQuery中，将图像附加到该容器。

$(document).ready(function() {
    $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>")
          .appendTo("#hiddenContainer");
    $("a[rel=example_group]").fancybox();
});

使用新创建的锚元素触发事件

1 个答案: