javascript - Fancybox：如何滚动 HTML 片段而不是具有相同效果的图像？

Question

我想显示 HTML 片段而不是具有相同滚动效果的图像（当我们调用 next() 方法时）。

我不知道如何使它工作。我们可以用一个 html 片段显示 fancybox：

$.fancybox( htmlFragment );

但我想要几个片段。如何强制库。使用 HTML 片段而不是图像？

为什么我需要它：我必须创建一个带有多个表单的弹出向导。

Answer 1

您可以将 html 片段作为inline内容

<div style="display: none">
    <div id="section1">
        <h1>Section One</h1>
        ...content
    </div>
    <div id="section2">
        <h1>Section Two</h1>
        ...content
    </div>
    <div id="section3">
        <h1>Section Three</h1>
        ...content
    </div>

    ... etc
</div>

并链接到每个部分，例如

<a rel="gallery" class="fancybox" href="#section1">open section one</a>
<a rel="gallery" class="fancybox" href="#section2">open section two</a>
<a rel="gallery" class="fancybox" href="#section3">open section three</a>

请注意，所有链接共享相同的rel属性。

然后使用一个简单的fancybox脚本

$(".fancybox").fancybox();

见JSFIDDLE