Load a specific div into a modal window using fancybox

Question

I am using fancybox 2. I was able to upload content to fancybox via AJAX. But it loads the whole page, and I'm only interested in a specific div. In fancybox 1, we could do this by adding a filter to ajax. But I'm not sure how to filter in fancybox 2.

How to filter specific div from loaded AJAX page in fancybox 2?

$(".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]; } }); 

Disable ajax, but it loads the whole page when I add the filter, and then stops working. So I used to do in fancybox 1.

Answer 1

If you are using the latter (https://github.com/fancyapps/fancyBox/zipball/master) then there is a trick to loading a specific element from ajax response -

 <a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a> $(".fancybox").fancybox(); 

Answer 2

I achieved this using the afterLoad to update the content to find your specific item.

 $('.fancybox').fancybox({ afterLoad : function() { this.content = $("<div>").html(this.content).find("#main-content").html(); } }); 

So, in this example, only the content in the #main-content element will be loaded.

This allows us to simply follow the link on a mobile device, but load the page inside fancybox onto the desktop without a header or footer, etc.

Answer 3

With fancybox 3 its even simpler:

 <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#yourDivId" href="javascript:;">AJAX Content</a> 

Watch the demo