Использование EasyFancybox Wordpress Plugin вместе с Infinite-Scroll - PullRequest
Новая
       20

Использование EasyFancybox Wordpress Plugin вместе с Infinite-Scroll

0 голосов
/ 13 декабря 2011

Попытка выяснить, как повторно инициализировать Easy FancyBox, когда новый контент загружается с бесконечной прокруткой.Я пробовал $.fancybox.init(), но этого недостаточно.В разделе заголовка сценарий, который вызывает 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?Спасибо за любую помощь.

1 Ответ

0 голосов
/ 13 декабря 2011

Отметьте эту тему , это может помочь (EasyFancybox использует fancybox v1.3.4)

Обновление : Я только что напомнил, что ссылка (выше) будет работать для отдельных новых добавленных элементов, но не для галерей. Если у вас есть набор галерей (с использованием атрибута rel), то вы можете предпочесть обновить до jQuery 1.7+ (если еще нет) и использовать jQuery on() вместо delegate(), что позволит вам инициализировать ваши существующие и динамически добавленные элементы.

Я сделал пример страницы здесь , которая показывает, как использовать jQuery on() для решения проблемы динамически добавляемых элементов и fancybox (v1.3.x), если вы хотите чтобы посмотреть.

На основании примера страницы, я думаю, в вашем конкретном случае вы можете попробовать настроить свой код следующим образом: 

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+.

...