Feeding Fancybox through AJAX

On Fancybox's home page there's an example (last one on page's bottom) where Fancybox is feed through a direct list.

Now i'd like to build a gallery where you see only the first thumbnail then after you clicked it, a PHP script sends back the list of images available in the same format as the example shows:

'http://example.com/img1.jpg','http://example.com/img2.jpg'

Now my problem is the images aren't showing up bec开发者_JAVA技巧ause Fancybox is making something with my url list (i.e. images giving 404's).

• Links (when opened directly) are working fine.
• PHP's direct output inserted directly onto the script everything is fine.
• What Fancybox does is overwriting my list like:

http://example.com/'http://example.com/img1.jpg','http://example.com/img2.jpg'

Of course, this will fail.

My question is how can i feed Fancybox (or any other lightbox lib) through AJAX properly?

There was no need to modify Fancybox's source itself all i needed to get this thing work is to reassebmle the array for feeding the gallery via AJAX properly.

...
var _items = [];
$.getJSON('ajax/gjson.php', {dir: $(this).attr('rel')}, function(response){

    $.each(response, function(key, val) {
        _items.push({'href' : val.href, 'title' : val.title});
    });

    $.fancybox(_items, {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});
...

I was just messing around with this and found that fancybox only deals with one image at a time from ajax, and it needs to be in HTML. So, what it expects to see is this:

<a href="#" title="image1 title"><img src="image1.jpg"></a>

Also, I just answered this question about loading up the gallery with new ajax loaded data which actually requires two minor changes to the plugin itself.