fancybox не работает с контентом ajax

Question

У меня есть следующий код:

$(document).ready(function(){ $("a#cakeImages").live("click",function() fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    })) 
});

и у меня есть правильные изображения:

<a id="cakeImages" href="cakes/2/1.jpg" > 
<img alt="cakeImages" class="align-left no-border" src="cakes/2/1.jpg"  /></a>

Но это совсем не работает. Я использую .live, потому что мои реальные изображения меняются из-за сценария ajax на странице

Но когда я только изменить его на:

$(document).ready(function() {$("a#cakeImages").fancybox({
            'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
     }) 
}); 

Работает только в первый раз. У кого-нибудь есть подсказка, что происходит? : D

Answer 1

С советами Сайката и Ника мне удалось придумать код, который работает с галереей изображений.Вместо одного.

$(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});

Что он делает.Когда Ajax закончит загрузку изображений на страницу.При первом нажатии на любую ссылку с группой «rel = gallery», она загрузит событие fancybox на те, которые не имеют класса «fb».Если это произойдет, он не будет вызывать его во второй раз, а сразу перейдет к triggerHandler.

Надеюсь, это поможет всем, кто пытается заставить fancybox работать с галереей изображений.Я не проверял это на загрузках ajax с одним изображением, но я предполагаю, что это будет работать.

Answer 2

Я знаю, что это старая ветка, но я нашел ее, когда искал ответ на нее, так что вот так: если вы используете значение по умолчанию

<a href="somewere.com" class="something"><img src="myimage.jpg" /></a>

, используяajax начал открываться первый ответ, затем все равно перешел на URL, поэтому я изменил вызов fancybox на следующий:

`$(".fancybox").live("click", function(event) {`
     `event.preventDefault();`
         `$(this).filter(':not(.fb)').fancybox()`
         `.addClass('fb');`
         `$(this).triggerHandler('click');`

    `});`

первый ответ заставил меня задуматься о том, что происходит в вызове Fancybox, event.preventDefault(); это недостающая часть первого ответа в моем случае.

Надеюсь, это поможет кому-то.Кстати, Petyp благодарит за правильный путь.

Answer 3

Так как вы только связываете фантазийный ящик с первого клика, не открывая его, вам нужно будет фактически запустить его обработчик через .triggerHandler(), чтобы открыть его после этого связывания, вот так:

$(function(){ 
  $("a#cakeImages").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
}); 

То, что это делает, это прослушивает клики на элементах <a id="cakeImages"> (должен быть только один за раз, используйте класс вместо идентификатора, если это не так), и если мы еще не запустили .fancybox() (у него нет класса fb, проверьте через .filter() и :not()), затем сделайте это и назначьте класс (через .addClass()), следующий щелчок не запустит это, только вызовет обработчик щелчка, который откроет fancybox.

Answer 4

Объединив ответы Роя и Ника, у меня есть законченное решение, прекрасно работающее внутри функции Ajax.

    $(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});
        $(function(){ 
  $("a.fancybox").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
}); 

Answer 5

$(document).ready(function(){                      
    $("a.previewfancy").live("click", function(event) {
        event.preventDefault();
        $(this).filter(':not(.fb)').fancybox()
         .addClass('fb');
         $(this).triggerHandler('click');
    });
});