的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

既然你只結合第一個點擊的fancybox，不打開它，你會需要真正觸發它的處理程序，通過.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">元素的點擊次數（應該只有一次一個，使用一個類，而不是一個ID，如果不是這種情況），如果我們還沒有運行.fancybox() （它沒有fb班，請通過.filter()和:not()查看）然後這樣做，然後分配班級（vi一個.addClass()），下一次點擊它不會運行這個，只觸發點擊處理程序，這將打開fancybox。

Answer 2

我知道這是一個古老的線程，但我發現它時，我一直在尋找的答案，它所以這裏有雲： 如果你使用的是默認

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

使用AJAX的第一個答案開始打開，然後去了網址反正所以我改變了的fancybox調用以下：

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

    `});` 

第一個答案讓我聯想到在通話的fancybox發生了什麼事情，在event.preventDefault();它牛逼他在我的情況下缺少第一個答案的一部分。

希望這可以幫助別人。 順便說一句，感謝Petyp推動正確的方式。

Answer 3

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

Answer 4

從Saikat和Nick的提示中，我設法提出了一些與圖像庫一起工作的代碼。而不只是一個。

$(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 5

結合羅伊和尼克的答案，我有完美的解決方案在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'); 
    }); 
});