通过AJAX提供Fancybox

fab*_*rik 2 ajax jquery fancybox

Fancybox的主页上有一个例子(页面底部的最后一个),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)?

fab*_*rik 5

没有必要修改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
    });
});
...
Run Code Online (Sandbox Code Playgroud)