3

我正在测试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();
    });
})

});

谢谢

4

2 回答 2

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)从第一个项目开始画廊，否则画廊将从附加到文档的最后一个元素开始。

更新：看到它在这里工作演示

于 2012-06-11T21:51:12.710 回答
0

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

于 2012-06-13T16:19:01.673 回答