Fancybox2内联内容库

Question

我正试图用Fancybox 2创建一个内联内容库，但不幸的是失败了。

我在网上查看了其他一些资源，它们似乎表明这样做相对容易，但是，我似乎无法让它发挥作用。

这是我的小提琴：

http://jsfiddle.net/beefchimi/jtxHd/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检查器中的任何JS错误。