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

【问题标题】：Passing an array of image objects to Fancybox (lightbox) doesn't seem to work?将图像对象数组传递给 Fancybox（灯箱）似乎不起作用？
【发布时间】：2012-01-02 13:34:48
【问题描述】：

我正在尝试让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

有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-plugins fancybox

【解决方案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]);

【讨论】：

【解决方案2】：

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

【讨论】：