如何使用动态内容触发fancybox画廊 [英] how do I trigger fancybox gallery with dynamic content

问题描述

我正在测试fancybox，它看起来是一个不错的小库，用于画廊和内容加载.我在下面的工作方式下有以下代码，但是，当我单击带有lightbox类的项目时，我需要它来触发图库.下面的代码将gallery.htm中的内容加载到内容div中，然后当我单击内容div中的缩略图时，它会启动fancybox.我想做的就是一键加载我的动态内容并启动精美的框，有人建议我吗?

Im testing out fancybox, looks quite a nice little library for galleries and loading in content. I've got the following code below kind of working, however I need it to trigger off the gallery as soon as I click on an item with the lightbox class. The code below loads content from gallery.htm into the content div and then when I click on a thumbnail image from my content div it launces fancybox. What I am trying to do is on one click load my dynamic content and launch fancy box, anyone advise me please?

$(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();
    });
})

});

谢谢

推荐答案

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

Basically you would need two selectors:

1).使用.load()方法将图库缩略图加载到页面中，例如loadGallery:

1). one to load the gallery thumbnails into the page using the .load() method, e.g. loadGallery:

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

2).另一个将元素绑定到fancybox的方法，例如lightbox.然后，文件" gallery.htm "中的所有元素都应具有这样的class:

2). another to bind elements to fancybox, e.g. lightbox. All the elements within the file "gallery.htm" should have then such class like:

<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画廊，并使用另一个脚本:

Then bind those elements (in your main page) to fancybox with one script and load the gallery thumbnails into the page and fire the fancybox gallery within the same click, with another like :

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

Notice that we are using .on() instead of .live() since the second has been deprecated. The .on() method requires jQuery 1.7+ though.

还要注意，我们使用.eq(0)从第一个项目开始画廊，否则画廊将从附加到文档的最后一个元素开始.

Also notice that we used .eq(0) to start the gallery from the first item, otherwise the gallery will start from the last element appended to the document.

更新:请参见 DEMO

这篇关于如何使用动态内容触发fancybox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！