我怎么触发与动态内容的fancybox画廊(how do I trigger fancybox ga

进出口检验出来的fancybox，看起来相当一个可爱的小库中的内容画廊和加载。我有以下一种工作的下面的代码，但是我需要它，因为我点击与收藏类的项目尽快触发关闭画廊。下面负载内容的代码从gallery.htm到内容DIV，然后当我的缩略图上点击从我的内容DIV它launces的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和画廊缩略图加载到页面和火一样内的fancybox画廊click ，另一个这样的：

$(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