0

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へのリンクは問題ないため、コードを含めずに質問を送信することはできません.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

インライン コンテンツにリンクしている場合は#、先頭にを含める必要があります。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 エラーを確認してください。

于 2012-10-29T17:09:18.800 に答える