Question

我正试图让fancybox在灯箱中显示一系列图像。不幸的是，只有第一张图片出现了。据我所知the docs，我应该能够将一系列对象传递给fancybox并让它们全部打开。

我的代码在下面（请注意，我从coffeescript翻译了袖口，因此可能会有一些错误。）

当我记录images数组时，它看起来像一个完全正常的对象数组。导航到浏览器中每个图像的URL会完美显示图像，证明URL有效。

$(function(){
  $('.lightbox').click(function(event){
    event.preventDefault();
    // need to be able to get the link target
    $link = $(event.target).closest('a');

    $.getJSON($link.attr('href'), function(cake){
      // map the json to an array that fancybox can use
      images = $(cake.images).map(function(key, image)){
        return({ href: image.url });
      });

      console.log(images);
      // => [{href: 'image1.jpg'},{href: 'image2.jpg'},{href: 'image3.jpg'}]

      // show the lightbox
      $.fancybox.open(images);
    });
  });
});

HTML（混合了一些红宝石）：

<a href="<%= cake_path(cake) %>" class="lightbox">
  <%= cake.primary_thumbnail %>
  <h2>Chocolate Cake</h2>
</a>

另一个提示是将选项index: 2传递给fancybox会破坏它（它应该导致脚本在序列中的第三个图像上打开）。我收到以下错误：

475Uncaught TypeError: Cannot read property 'nodeType' of null

有什么想法吗？

Answer 1

正确的语法应该是：

$.fancybox([ 
 {href : 'img1.jpg', title : 'Title'}, 
 {href : 'img2.jpg', title : 'Title'},
 {href : 'img3.jpg', title : 'Title'}  
 ],[
 {
 // API options here
 }
]);

所以我猜你的构造函数应该返回每个数组元素后跟一个逗号除了最后一个：

{ href: image.url },

然后我想你应该像fancybox一样调用fancybox：

$.fancybox.open([images]);

Answer 2

我打开an issue on Github并被告知要更新到latest version（比通过FancyBox网站上的下载链接当前可用的版本更新）。一旦我这样做，问题就消失了。

将一组图像对象传递给Fancybox（灯箱）似乎不起作用？

2 个答案: