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 ”（如在您的代码库中，您必须正确构建您的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属性的链接将成为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

Answer 2

$(document).ready(function(){
    jQuery(".fancy").on('click', function(){
        var content = $(this).next().html();
        $.fancybox({
            'content': content
        });
        return false;
    });
});

fiddle here （没有添加所有选项）

确保包含正确的jQuery和Fancybox脚本，请参阅here

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

2 个答案: