Question

我正在尝试使用Fancybox 2创建一个内联内容库，但是我很失败。

我在网上检查了一些其他资源，他们似乎表示相对容易做到这一点，但是，我似乎无法让它工作。

这是我的小提琴：

现在，我觉得小提琴没有加载资源，所以这就是问题所在。但即使资源不起作用，我也会得到fancybox错误。

资源：

http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3 http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3

非常感谢任何帮助。

编辑：所以我不能在不包含一些代码的情况下提交我的问题，因为链接到jsfiddle是不行的，所以，这里是我的标记和fancybox初始化，你也可以在jsfiddle：

HTML：

<section><!-- Gallery 1 |begin| -->

    <!-- Inline post-1 -->
    <article>
        <a href="post-1" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &gt; post-2 &gt; post-3</a>
        <div id="post-1">Inline content for #post-1. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-2 -->
    <article>
        <a href="post-2" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &gt; post-3</a>
        <div id="post-2">Inline content for #post-2. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-3 -->
    <article>
        <a href="post-3" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &lt; post-3</a>
        <div id="post-3">Inline content for #post-3. Group is Gallery 1.</div>
    </article>

</section><!-- Gallery 1 |end| -->

<section><!-- Gallery 2 |begin| -->

    <!-- Inline post-4 -->
    <article>
        <a href="post-4" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &gt; post-5</a>
        <div id="post-4">Inline content for #post-4. Group is Gallery 2.</div>
    </article>

    <!-- Inline post-5 -->
    <article>
        <a href="post-5" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &lt; post-5</a>
        <div id="post-2">Inline content for #post-5. Group is Gallery 2.</div>
    </article>

</section><!-- Gallery 2 |end| -->

jQuery的：

$(document).ready(function() {

    $('a.inlinepopup').fancybox({
        'width'           : '75%',
        'height'          : '75%',
        'autoScale'       : false,
        'type'            : 'inline'
    });

});

Answer 1

如果要链接到内嵌内容，则需要在#

开头添加href

所以将您的href="post-1"更改为href="#post-1"

在上下文中，它应该是这样的：

<!-- Inline post-1 -->
<article>
    <a href="#post-1" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &gt; post-2 &gt; post-3</a>
    <div id="post-1">Inline content for #post-1. Group is Gallery 1.</div>
</article>

这可能不是唯一的错误，但它是第一个要看的错误。还要检查Firebug或Web Inspector中的任何JS错误。

Fancybox2内联内容库

1 个答案: