イメージオブジェクトの配列をFancybox（ライトボックス）に渡すことは機能していないようですか？

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> 

fancyboxにオプションindex: 2を渡すと、それを壊していること（それはスクリプトが第三の画像に開かせる必要がありますされたもう一つのヒント配列）。次のエラーが表示されます。

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

アイデアがありますか？

Answer 1

私はan issue on Githubを開いて、 eをlatest version（現在FancyBoxウェブサイトのダウンロードリンクを介して入手可能なバージョンより新しい）に変更します。私はそれをやれば問題は解消されました。

Answer 2

正しい構文は次のようになります。

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

ので、私はあなたのコンストラクタは、最後のものを除いコンマに続くすべての配列要素を返す必要がありますね：

{ href: image.url }, 

その後、私はあなたがfancyboxを呼び出す必要がありますねlike：

$.fancybox.open([images]);