0

新しいコンテンツが無限スクロールでロードされたときに Easy FancyBox を再初期化する方法を見つけようとしています。試してみ$.fancybox.init()ましたが、これでは十分ではないようです。head セクションでは、easy fancybox を呼び出すスクリプトは次のとおりです。

jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true }) );
/* Auto-click */ 
$('#fancybox-auto').trigger('click');
});
/* ]]> */

#content div.post にロードされた新しいコンテンツに具体的にバインドされた、このようなものを再初期化する方法はありますか? 助けてくれてありがとう。

4

1 に答える 1

0

このスレッドを確認してください。役立つ場合があります (EasyFancybox は fancybox v1.3.4 を使用しています)。

更新：参照のスレッド（上記）は、単一の新しく追加された要素に対して機能しますが、ギャラリーに対しては機能しないことを思い出しました. 一連のギャラリーがある場合 (rel属性を使用)、jQuery 1.7+ にアップグレードし (まだの場合)、jQuery on()の代わりに を使用delegate()することをお勧めします。これにより、既存の動的に追加された要素を初期化できます。

動的に追加された要素と fancybox (v1.3.x) の問題を解決するために使用する方法を示すサンプル ページをここに作成しました。jQuery on()

サンプルページに基づいて、特定のケースでは、次のようにコードを微調整してみてください。

jQuery(document).ready(function($){
    var fb_timeout = null;
    var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
    /* IMG */
    $("#content div.post").on("focusin", function(){
        var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
        $(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'});
        $('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 
            'transitionIn' : 'elastic', 
            'easingIn' : 'easeOutBack', 
            'transitionOut' : 'elastic', 
            'easingOut' : 'easeInBack', 
            'opacity' : false, 
            'titleShow' : true, 
            'titlePosition' : 'over', 
            'titleFromAlt' : true 
        }) );
        /* Auto-click */ 
        $('#fancybox-auto').trigger('click');
    }); // on
}); // ready

もちろん、jQuery 1.7+ が必要です。

于 2011-12-13T18:20:15.500 に答える