0

ユーザーが画像のサムネイルをクリックして大きな画像を表示できるように、Fancybox を使用しています。

私が抱えている問題は、ページの読み込み時に常に機能するとは限らないことです。サムネイルをクリックすると、Fancybox に大きな画像が表示されません。ただし、ページを更新すると、問題なく動作します。コンテンツは動的に生成されるので、DOM を更新する必要があるのでしょうか?

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                openEffect  : 'fade', // openEffect / closeEffect / nextEffect / prevEffect 
                closeEffect : 'fade', // Animation effect ('elastic', 'fade' or 'none') for each transition type
                nextEffect  : 'fade', // String; Default value: 'fade', 'fade', 'elastic', 'elastic'
                prevEffect  : 'fade',
                openSpeed   : '1000', // openSpeed / closeSpeed / nextSpeed / prevSpeed     
                closeSpeed  : '1000', // The time it takes (in ms, or "slow", "normal", "fast") to complete transition
                nextSpeed   : '1000', // Integer; Default value: 250
                prevSpeed   : '1000',
                padding     : 3
            });
        });
    </script>

<a class='fancybox' rel='gallery' href='".$data['photo'][$x]."'><img src='".$data['photo'][$y]."' style='margin-right: 2.5px; margin-left: 2.5px; vertical-align: top;'></a>

動作していないときにサムネイルをクリックすると、次のエラーが表示されます...

TypeError: a[0] is undefinedjquery.fancybox.pack.js の 15 行目。

これが私がFancyboxを呼び出す方法です。おそらくそれが問題ですか?

<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>

ここだけでなく、ページが読み込まれたときに表示される Fancybox がある別のページでも機能を利用できる限り、どのバージョンの fancybox を使用しているかは気にしません。

4

1 に答える 1

0

上記のように呼び出す代わりに、同じクラスの同じページに複数の画像がある場合は、使用できます

$("a[rel=gallery]").fancybox({
     openEffect  : 'fade', // openEffect / closeEffect / nextEffect / prevEffect 
            closeEffect : 'fade', // Animation effect ('elastic', 'fade' or 'none') for each transition type
            nextEffect  : 'fade', // String; Default value: 'fade', 'fade', 'elastic', 'elastic'
            prevEffect  : 'fade',
            openSpeed   : '1000', // openSpeed / closeSpeed / nextSpeed / prevSpeed     
            closeSpeed  : '1000', // The time it takes (in ms, or "slow", "normal", "fast") to complete transition
            nextSpeed   : '1000', // Integer; Default value: 250
            prevSpeed   : '1000',
            padding     : 3
});
于 2013-03-26T04:32:39.830 に答える