1

我将 Fancybox 设置为显示 8 张图片的画廊。第一个显示在页面上并在单击时打开图库。

我现在要做的是添加另一个画廊，除了 HTML 内容而不是图像，所以它就像在导航画廊时翻阅一本书。但是当我单击图像时什么都没有出现。

这是我的 Fancybox 脚本：

  <script type="text/javascript">
     $(document).ready(function(){   
        $("a.fancybox").fancybox({
           openEffect    :   'none',
           closeEffect   :   'none',
           nextEffect    :   'none',
           prevEffect    :   'none',
           nextSpeed     :   0,
           prevSpeed     :   0,
           preload       :   3,
           'padding'     :   15,
           'speedIn'     :   0, 
           'speedOut'    :   0, 
           'overlayShow' :   true
        });
     });
  </script>

这是HTML：

<a class='fancybox' rel='{$id}' href=#popuptext><img src='galleryimage.jpg'></a>
<div style='display: none'><div id='popuptext'>Page 1 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 2 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 3 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 4 text</div></div>
4

1 回答 1

1

您不能让多个元素共享同一个ID #popuptext，因为ID应该是唯一的。

您实际上需要为每个页面分配一个不同的ID，并为每个不同的选择器 ( ID ) 分配一个链接目标，以便您可以这样做：

<a class="fancybox" href="#page1" rel="gallery"><img src="galleryimage.jpg" alt=""/></a>

<div style="display: none"> 
    <a class="fancybox" href="#page2" rel="gallery"></a>
    <a class="fancybox" href="#page3" rel="gallery"></a>

    <div id="page1">page 1 text lorem ipsum</div>
    <div id="page2">page 2 content and more content</div>
    <div id="page3">page 3 text blah, blah, blah</div>
</div>

第一个链接（带有图像缩略图）将打开图库。其他链接不必可见，也不必有缩略图。

然后你的脚本就可以了

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'none',
    prevEffect: 'none',
    nextSpeed: 0,
    prevSpeed: 0,
    preload: 3,
    padding: 15
    // 'speedIn'    :   0, // not a valid option for v2.x
    //'speedOut'    :   0, // not a valid option for v2.x
    //'overlayShow' :   true // not a valid option for v2.x
});

请注意，我注释掉了一些对 v2.x 无效的选项。检查文档以了解您应该在 v2.x 中使用的选项

见JSFIDDLE

于 2013-06-10T16:15:18.817 回答