Jquery 如何使用动态内容触发fancybox gallery

我正在测试fancybox，它看起来是一个很不错的小图库，用于画廊和加载内容。下面的代码可以正常工作，但是我需要它在我单击lightbox类的项目时立即触发gallery。下面的代码将gallery.htm中的内容加载到content div中，然后当我单击content 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();
    });
})

}))

---

谢谢

基本上，您需要两个选择器：

1） 。使用

.load（）

方法将图库缩略图加载到页面中，例如

loadGallery

：

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

然后使用一个脚本将这些元素（在主页中）绑定到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（）
，而不是因为第二个已被弃用。
.on（）
方法需要jQuery 1.7+

还要注意，我们使用
.eq（0）
从第一项开始创建库，否则库将从附加到文档的最后一个元素开始

更新：看到它在这里工作
我会发出Aajax请求，该请求将返回包含库项目的JSON响应。然后我会手动打开fancybox（例如$.fancybox.open（响应）；其中响应类似[{href:'}，{href:'}]）
Hi-JFK，尝试了这个，但它说无法加载请求的内容。我得到了一个警报，以查看加载到#内容中的内容，实际上图像标记都在它们的页面中，并且具有正确的rel属性。提前感谢：）我已经设法让你的代码工作，但它在FireFox中不工作。你能帮我做这个吗？这是一个链接，我认为打开一个新问题不是一个好主意，因为事情可能会变得一团糟（我们可以在这个问题中对所有内容进行排序）。在你的另一个问题中，当我建议你使用两个不同的选择器时，你使用的是同一个选择器。嗨，JFK，抱歉，我以为我在工作中破解了另一个代码，直到我发射了FF-这一切都搞砸了。在家试用，即不起作用，FF和Chrome也不起作用。所以我想我会回到基础上来，使用这段代码，在另一个线程上回复，这样我就不会浪费任何时间了。好的，用你的代码重做我的页面，它看起来好像内容正在我的页面中加载，但是当fancybox启动时，它显示请求的内容无法加载，请重试。请在答案中查看我的更新，我添加了一个演示，以便你可以比较代码。嗨，Janis，我用JFK的解决方案解决了我的原始问题。然而，我遇到了另一个插件，我可能想用它来做其他事情，但需要json响应。我知道如何将响应返回为html，但如何将它们转换为json以与这些插件一起使用呢？是否有我需要访问的库或其他东西？如果您的响应是JSON编码的数据（例如，在php中使用JSON_encode），那么您可以像-$.ajax（{url:url，dataType:'JSON'，data:data，success:function（data）{$.fancybox.open（data）；}}）；谢谢，我没有意识到有一个像JSON编码的库我可以点击。我找到了一个asp的等价物：）-我将尝试并找出如何使用它：）
$(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