jquery - 如何触发带有动态内容的 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() 方法将图库缩略图加载到页面中，例如加载画廊:

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

2).另一个将元素绑定(bind)到 fancybox，例如灯箱。文件“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>

然后使用一个脚本将这些元素(在主页中)绑定(bind)到 fancybox，并将图库缩略图加载到页面中，并在同一点击内触发 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