打开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+