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（响应）;其中响应类似于[{href：''}，{href：''}]）

如何使用动态内容触发fancybox图库

2 个答案: