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

Question

I'm trying to get fancybox to display a series of images in a lightbox. Unfortunately, only the first image is showing up. As far as I can tell from the docs , I should be able to pass an array of objects to fancybox and have it open them all.

My code is below (note that I translated from coffeescript off the cuff so it might have some errors).

When I log the images array it seems like a perfectly normal array of objects. Navigating to the url for each image in the browser displays the image perfectly, proving that the URLs are valid.

$(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 (with some ruby mixed in):

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

One other hint is that passing the option index: 2 to fancybox breaks it (it should cause the script to open on the third image in the sequence). I get the following error:

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

Any ideas?

Answer 1

The correct syntax should be:

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

so I guess your constructor should return every array element followed by a comma except the last one:

{ href: image.url },

then I guess you should call fancybox like:

$.fancybox.open([images]);

Answer 2

I opened an issue on Github and was told to update to the latest version (which is newer than the version currently available via the download link on the FancyBox website). The problem went away once I did that.