我如何触发带有动态内容的fancybox画廊

Question

我正在测试 fancybox，看起来是一个不错的小库，用于画廊和加载内容。我有下面的代码可以正常工作，但是只要我单击带有灯箱类的项目，我就需要它来触发画廊。下面的代码将来自 gallery.htm 的内容加载到内容 div 中，然后当我单击内容 div 中的缩略图时，它会启动 fancybox。我想做的是一键加载我的动态内容并启动花哨的盒子，请有人告诉我吗？

$(document).ready(function(){
$('.lightbox').live('click', function(e){
    e.preventDefault();
    //var url = $(this).attr('href');
    var url = "gallery.htm";
    $('#content').load(url, function(data, stat, req){
        $("a.lightbox").fancybox();
    });
})

});

谢谢

Answer 1

基本上你需要两个选择器：

1)。一种使用.load() 方法将图库缩略图加载到页面中，例如loadGallery:

<a href="javascript:;" class="loadGallery">add dynamic gallery thumbnails</a>

2)。另一个将元素绑定到fancybox，例如lightbox。文件“gallery.htm”中的所有元素都应该有这样的class，比如：

<a class="lightbox" rel="gallery1" href="images/01.jpg"><img src="images/01t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/02.jpg"><img src="images/02t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/03.jpg"><img src="images/03t.jpg" alt="" /></a>

然后使用一个脚本将这些元素（在您的主页中）绑定到fancybox，并将画廊缩略图加载到页面中并在同一个click 中触发fancybox 画廊，另一个类似：

$(document).ready(function(){
 // bind elements to fancybox
 $(".lightbox").fancybox();
 // load thumbnails and fire fancybox gallery
 $('.loadGallery').on('click', function(e){
  e.preventDefault();
  var url = "gallery.htm";
  $('#content').load(url, function(data, stat, req){
   $(".lightbox").eq(0).trigger("click");
  }); // load
  $(this).remove(); // you may remove the selector loadGallery after loading the thumbnails
 }); // on
}); // ready

请注意，我们使用 .on() 而不是 .live()，因为第二个已被弃用。 .on() 方法需要 jQuery 1.7+。

另外请注意，我们使用.eq(0) 从第一个项目开始画廊，否则画廊将从附加到文档的最后一个元素开始。

更新：在这里看到它的工作DEMO

Answer 2

我会发出 Aajax 请求，该请求将返回包含画廊项目的 JSON 响应。然后我会手动打开fancybox（例如 $.fancybox.open( response ); 其中 response 就像 [{href: ''},{href:''}])