我正在使用fancybox 2.我已经设法通过AJAX在fancybox中加载内容。但它加载整个页面,我只对特定的div感兴趣。在fancybox 1中,我们可以通过在ajax中添加过滤器来实现。但我不知道如何在fancybox 2中过滤。
如何从fancybox 2中的AJAX加载页面中过滤特定的div?
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
type : 'ajax',
'ajax' : {
dataFilter: function(data) {
return $(data).find('#modalArticleContainer')[0];
}
});
Untile ajax它工作但加载整个页面,当我添加过滤器然后它停止工作。这就是我以前在fancybox 1中所做的。
答案 0 :(得分:2)
如果您使用的是最新的(https://github.com/fancyapps/fancyBox/zipball/master),那么有一个技巧可以从ajax响应加载特定元素 -
<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
答案 1 :(得分:2)
我已使用afterLoad
回调来更新内容以找到您的特定元素。
$('.fancybox').fancybox({
afterLoad : function() {
this.content = $("<div>").html(this.content).find("#main-content").html();
}
});
因此,在此示例中,只会加载#main-content
元素中的内容。
这允许我们只关注移动设备上的链接,但是在没有页眉和页脚等的桌面上的fancybox内加载页面。
答案 2 :(得分:0)
fancybox 3更简单:
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#yourDivId" href="javascript:;">AJAX Content</a>
查看demo