Галерея Fancybox с помощью jQuery .live () - PullRequest
Новая
       19

Галерея Fancybox с помощью jQuery .live ()

0 голосов
/ 29 августа 2011

Я пытаюсь отобразить галерею Fancybox с данными, которые загружаются через JSON.Я смог заставить Fancybox загружаться правильно после загрузки и добавления нового HTML.Однако, когда я прикрепил rel = "somegroup", функция галереи не работает, и я не могу перебрать группу изображений из Fancybox.

Вот мой вызов fancybox: 

$('.fancyness').live('click', function(){
        $.fancybox(this, {
            'width'         : 'auto',
            'height'        : 'auto',
            'titleShow'     : true,
            'titlePosition' : 'over'
        });
        return false;
    });

И вот как выглядят изображения: 

html += '<li><a class="fancyness" rel="group" href="' + full + '" title="'+ title +'">';
html += '<img title="' + item.title + '" src="' + thumbnail + '" alt="' + item.title + '" /></a></li>';

Если я не использую .live, функция gallery (rel) будет работать правильно, но не с этими данными, потому что они загружаются в JSON.

У кого-нибудь есть идеи?Мне не повезло найти кого-то с подобной проблемой.

Спасибо.

Ответы [ 2 ]

5 голосов
/ 02 января 2012

Меня беспокоило, как в приведенном выше решении функция fancybox будет запускаться каждый раз, когда вы наводите указатель мыши на какой-либо элемент fancybox, поэтому я написал это, которое работает, но ничего не вызывает, если вы не нажмете на него. 

jQuery(document).on('click','.fancybox',function(e){
    e.preventDefault();//don't follow link
    jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
    jQuery(this).trigger('click.fb');//trigger click and fancybox popup
});

для старого jQuery 

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is('.fancybox')){
        e.preventDefault();//don't follow link
        jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
        self.trigger('click.fb');//trigger click and fancybox popup
    }
});
5 голосов
/ 21 сентября 2011

У меня была похожая проблема.Я нашел кое-что многообещающее здесь , если вам интересно.Решение, которое, похоже, сработало для большинства, состояло в том, чтобы отредактировать код fancybox, заменив .bind на .live.Я не мог заставить это работать для галерей изображений, все же.Другое предложение (комментарий 14) сработало (и не требует никаких действий с fanybox).Попробуйте, 

$("a.fancyness").live("mouseover focus", function() {
    $("a.fancyness").fancybox( {
        'width'         : 'auto',
        'height'        : 'auto',
        'titleShow'     : true,
        'titlePosition' : 'over'
    });
});

Если вы посмотрите на комментарий 14 по ссылке, вы заметите, что вторым селектором здесь является просто $(this) в этом комментарии.Это хорошо для отдельных изображений, но если вы используете галерею изображений, вы хотите, чтобы fancybox запускал на всех изображениях, а не только на том, на который вы навели курсор мыши и затем щелкнули (FYIЯ также включил событие фокуса, чтобы галерея изображений по-прежнему открывалась, если вы нажимаете на клавиатуре миниатюру и нажимаете клавишу ввода.

Если вы замените "mouseover focus" на "click", вы обнаружите, что нажатие только на большой палецзапускает плагин fancyboxЗатем вам нужно нажать второй раз, чтобы фактически запустить вашу галерею - отсюда и события "mouseover focus".

...