中的fancybox

Question

我使用的fancybox兩年，而不是使用<a>代碼啓用的fancybox我使用div標籤和我的javascript中我使用這個代碼DIV-發射畫廊，按照Fancybox文檔創建一個圖庫（通過將rel="gallery1"添加到您的圖像中，或在我的情況下，div s），沒有幻燈片放映，並且當Fancybox被觸發時，您無法從一個圖像導航到另一個圖像，圖像出現。

Answer 1

因爲沒有人真正知道答案，我的問題，我決定坐下來，並採取漫長而艱難地看着我的代碼;我來決定，我需要創建一個插件，這個工作。

當我開發我的投資組合（http://mrconnor.co.uk）我開發它，以便取代的fancybox是從<a>標籤火我會從<div>標籤火了：我這樣做使我的代碼可能是更清潔，再加上它會對我來說更容易迴歸，編輯和風格。

但是，我遇到了這個問題（這就是爲什麼我張貼），從這個畫廊或幻燈片不能正常工作，通過添加rel="gallery1"所有項目，我想在我的畫廊，所以我創建了一個jQuery插入。這裏

測試： http://jsfiddle.net/cranavvo/u3U23/

$.fn.fancyGallery = function($gallery_name){ 
    $(this).each(function(){ 
     $background_image = $(this).css("background-image"); 
     $background_image = $background_image.replace('url(','').replace(')',''); 

     $(this).attr({ 
      "data-fancybox-group": $gallery_name, 
      "data-fancybox-href": $background_image 
     });  
    }); 
}; 

Answer 2

您可以隨時綁定任何HTML元素的fancybox比<a>標籤其他（和創建無rel屬性畫廊），使用的fancybox的特殊data-fancybox-*屬性，如：

<div data-fancybox-group="gallery" data-fancybox-href="#inline1" class="fancybox">open first fancybox item</div> 

見JSFIDDLE

順便說一句，如果將fancybox綁定到多個元素，請使用類而不是ID

備註：如果您使用方法.click()激發fancybox，應該將該庫手動傳遞給腳本中的fancybox。您還可以綁定一個click的元素（填充目標元素的含量）結合的fancybox它像以前一樣：

$(".fancybox").click(function(){ 
    // populate the target inline element here 
}).fancybox();