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

Question

我试图让 fancybox 在灯箱中显示一系列图像。不幸的是，只显示第一张图片。据我所知，我应该能够将对象数组传递给 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（混合了一些 ruby​​）：

<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.open([images]);

Answer 2

我在 Github 上打开了 一个问题，并被告知更新到 最新版本（比当前通过 FancyBox 网站上的下载链接提供的版本更新）。一旦我这样做了，问题就消失了。