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

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

1 个答案: