通过AJAX提供Fancybox
问题描述:
在Fancybox's home page上有一个示例(页面底部的最后一个),Fancybox通过直接列表进行馈送。通过AJAX提供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(或任何其他灯箱库)?
答
没有必要修改Fancybox的源代码本身我所需要的就是重新组合通过AJAX为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
});
});
...
答
我只是搞乱了这一点,发现fancybox只处理一个图像在一次从ajax,它需要在HTML。那么,什么是希望看到的是:
<a href="#" title="image1 title"><img src="image1.jpg"></a>
另外,我刚才已经回答this question有关加载了这实际上需要对插件本身的两个小的变化新的Ajax加载数据的画廊。
请问您可以看看[this](http://*.com/questions/31351626/jquery-fancybox-with-ajax/31352383)的问题吗?提前致谢。 – 2015-07-11 13:55:24