打開fancybox當點擊div

Question

我經常使用<a>標籤href爲了打電話給fancybox。現在，我正在考慮用div點擊打開fancybox（ver1）。

<div id="content"></div> 

這可能嗎？

Answer 1

可以使用（HTML5）data-fanncybox-*屬性將除標籤以外的任何元素綁定到fancybox（v2.x）。

不幸的是，data-fanncybox-*屬性不爲的fancybox選項v1.3.x，但你仍然可以內你<div>和extend的fancybox（v1.3.x）功能，使用標準data-*屬性onStart回調。

因此，假如你想從一個div喜歡叫的fancybox：

<div class="fancybox" data-href="image.jpg">This DIV should open fancybox</div> 

注意的data-href屬性，它會告訴的fancybox，它應該得到（在<a>標籤的類似href屬性內容）

然後，你可以使用這個腳本：

$(".fancybox").fancybox({ 
    type: "image", 
    onStart: function (el, index) { 
     var thisElement = $(el[index]); 
     $.extend(this, { 
      href: thisElement.data("href") 
     }); 
    } 
}); 

參見JSFIDDLE

---

在另一方面，構建的fancybox（v1.3.x）畫廊比<a>其它元素不一樣容易只是添加rel屬性到<div>元件因爲它會觸發一個js錯誤。

作爲一種解決方法，您可以在腳本中手動構建庫。你可以做，使用.each()方法，如：

var gallery = []; 
jQuery(document).ready(function ($) { 
    $(".fancybox").each(function (i) { 
     gallery[i] = { 
      href: $(this).data("href"), 
      title : "image "+ (i+1) 
     }; 
     $(this).on("click", function() { 
      $.fancybox(gallery, { 
       // API v1.3.x options here 
       type: "image", 
       index: i, // IMPORTANT to open from clicked div 
       cyclic: true 
      }); // fancybox 
      return false; 
     }); // on 
    }); // each 
}); // ready 

見JSFIDDLE

注意：

• 這個解決方案是的fancybox v1.3.x
• .on()要求jQuery 1.7+