Fancybox畫廊與jQuery的.live（）

我想顯示一個Fancybox畫廊與數據，通過JSON加載。加載並追加新的HTML後，我可以正確加載Fancybox。但是，當我連接rel =「somegroup」時，圖庫功能不起作用，我無法遍歷Fancybox中的一組圖像。Fancybox畫廊與jQuery的.live（）

這裏是我的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畫廊（REL）功能將正常工作，但而不是這個數據，因爲這是用JSON加載的。

有沒有人有任何想法？我沒有多少運氣找到有類似問題的其他人。

謝謝。

來源

2011-08-29 Anna

'$（ 'A [相對=基]'）的fancybox（{' - 。改變的fancybox到這允許組來打開，然而，它增加了相同的圖像到最後一個索引處的組中的圖像列表，所以圖像在那裏兩次。有沒有辦法繞過額外的圖像？ – Anna

我有類似的問題。如果你有興趣，我發現了一些看起來很有希望的東西over here。那裏似乎最適用的解決方案是編輯fancybox代碼，用.live替換.bind。不過，我無法爲圖像庫工作。另一個建議（評論14）確實有效（並且不需要任何與fanybox混淆）。嘗試，

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

如果你看一下從鏈接註釋14，你會注意到的是這裏的第二個選擇是簡單地在評論$(this)。這對單張圖片來說很好，但是如果您使用的是圖庫，您希望fancybox在全部上啓動，而不僅僅是鼠標懸停然後單擊的圖片（僅供參考，我還包括焦點事件，所以如果您在縮略圖上鍵盤標籤並按回車鍵，圖片庫仍然會打開）。

如果您將"mouseover focus"替換爲"click"，您會發現單擊拇指只會觸發fancybox插件。然後，您需要再次單擊才能實際啓動您的畫廊 - 因此需要點擊"mouseover focus"事件。

來源

2011-09-21 14:21:37 Sam

我想你可能已經自己解決了這個問題，或者解決了它的問題現在如果是這樣的話，我希望這可以幫助其他人解決同樣的問題，就像我做的那樣。 – Sam

這是行得通的！我喜歡這個修補程序比我上面做的更好。爲什麼我在我原始帖子的評論中提到了額外的圖像。這次真是萬分感謝！ :) – Anna

好兄弟 – jack

令我很煩惱如何在上述方案中的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 
    } 
});

來源

2012-01-02 11:53:07

jQuery（'。fancybox'）。fancybox（） - 更新FB的註冊表。 – BasTaller

太棒了！現在用新的'on'事件處理器替換折舊的'live'（從jquery 1.7開始）jQuery(document).on('click','.fancybox',function(e){.. –

Fancybox畫廊與jQuery的.live（）

回答

相關問題