jquery - 当内容为 html 时，Fancybox 无法生成幻灯片

Question

我不知道这是否是一个错误，或者是否只是 fancybox 不允许的东西。是否可以拥有一个包含 HTML 元素的画廊？我几个小时以来一直在尝试这样做，但找不到好的方法。

HTML:

<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 1</div>
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 2</div>
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 3</div>

JavaScript:

jQuery(".fancy").on('click', function(){
    jQuery.fancybox({
        content: jQuery(this).next().html(),
        scrolling: 'no',
        autoSize: false ,
        height:250,
        width:630,
        padding:0
    });
    return false;
});

Answer 1

可以有一个 html 元素库，但是您需要首先了解它的确切含义。

如果您想要的是“我的内容 1”、“我的内容 2”和“我的内容 3”(如在你上面的代码中)在 fancybox 画廊中，那么你必须正确地构建你的 html。

首先，每个链接都应通过定位其 ID 来指向特定内容，例如:

<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a>

...上面的行意味着您有 content 1 html，如下所示:

<div id="content1" class="content">my content 1</div>

...因此文本my content 1将是图库中第一项的实际content(共享相同rel的链接) code> 属性将成为 fancybox 库的一部分)

您可以将所有目标内容分组到隐藏的 div 中，例如:

<div style="display:none">
    <div id="content1" class="content">my content 1</div>
    <div id="content2" class="content">my content 2</div>
    <div id="content3" class="content">my content 3</div>
</div>

并让您的链接仅可见

<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a>
<a href="#content2" class="fancy" rel="fancy">See more (content 2)</a>
<a href="#content3" class="fancy" rel="fancy">See more (content 3)</a>

查看画廊在此 JSFIDDLE 中的工作

另一方面，如果你使用data-fancybox-type="html"属性，fancybox实际上会解析html代码，所以如果你有一个链接例如上面的例子

<a href="#content1" class="fancy" data-fancybox-type="html" rel="fancy">See more (content 1)</a>

... fancybox 的内容不会是上面提到的 jsfiddle 中的 my content 1 而是 #content1 因为 fancybox 会解析链接的 html

查看新 JSFIDDLE