使用 Fancybox 2 显示图像/文本库

Question

我将 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>

Answer 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 无效的选项。检查the documentation 以了解您应该在 v2.x 中使用的选项

见JSFIDDLE