使用Fancybox 2显示图像/文本库 [英] displaying image/text gallery with Fancybox 2

问题描述

我设置了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>

解决方案

您不能有多个元素共享相同的 ID #popuptext，因为 ID 应该是唯一的./p>

实际上，您需要为每个页面分配一个不同的 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

I have Fancybox set up to display a gallery of 8 pictures. The first one is displayed on the page and opens the gallery when clicked.

What I'm trying to do now is add another gallery, except with HTML content instead of images, so it's like flipping through a book when navigating the gallery. But nothing's appearing when I click the image.

Here's my Fancybox script:

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

And here's the 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>

解决方案

You cannot have several elements sharing the same ID #popuptext since IDs should be unique.

You actually need to assign a different ID to each page and a link targeting to each different selector (ID) so you could do :

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

The first link (with image thumbnail) will open the gallery. The other links don't have to be visible neither to have a thumbnail.

Then your scrip will work

$(".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
});

Notice that I commented out some options that are not valid for v2.x. Check the documentation for the options you should be using in v2.x

See JSFIDDLE

这篇关于使用Fancybox 2显示图像/文本库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！