fancyapps/fancyBox — Issue #83: Passing an array of image objects to Fancybox doesn't seem to work?
Author: dtuite
Created: 2012-01-02 13:37:15+00:00
State: open

I'm trying to get [fancybox](http://fancyapps.com/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](http://fancyapps.com/fancybox/#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):

<%= cake.primary_thumbnail %>

Chocolate Cake

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?

[Stackoverflow question](http://stackoverflow.com/questions/8701467/passing-an-array-of-image-objects-to-fancybox-lightbox-doesnt-seem-to-work) if anyone wants some bonus points.