Question

在Fancybox's home page上有一个示例（页面底部的最后一个），其中Fancybox通过直接列表提供。

现在我想构建一个只看到第一个缩略图的图库，然后点击它之后，PHP脚本会以与示例所示相同的格式发回可用图像列表：

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

现在我的问题是图像没有显示，因为Fancybox正在使用我的网址列表（即图像给出404）。

链接（直接打开时）工作正常。
PHP的直接输出直接插入到脚本中，一切都很好。
Fancybox所做的是覆盖我的列表，如：

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

当然，这会失败。

我的问题是如何通过AJAX正确地提供Fancybox（或任何其他灯箱lib）？

Answer 1

没有必要修改Fancybox的源码本身所需要的就是重新组装数组以便通过AJAX正确地提供图库。

...
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
    });
});
...

Answer 2

我只是弄乱了这个，发现fancybox一次只处理一个来自ajax的图像，它需要是HTML格式。所以，它期望看到的是：

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

另外，我刚回答this question关于使用新的ajax加载数据加载图库，这实际上需要对插件本身进行两次小的更改。

通过AJAX提供Fancybox

2 个答案: