0

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

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

这是我的小提琴：

http://jsfiddle.net/beefchimi/jtxHd/2/

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

资源：

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'
    });

});
4

1 回答 1

2

在您链接到内联内容的地方，您需要#在开头包含 ahref

所以改变你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 错误。

于 2012-10-29T17:09:18.800 回答