load specific div in modal window using fancybox

Question

I am using fancybox 2. I have manage to load content in fancybox via AJAX. But it loads the whole page and I am only interested in specific div. In fancybox 1 we could do that by adding filter in ajax. But I am not sure how to filter in fancybox 2.

How to filter specific div from AJAX loaded 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];
        }
    });

Untile ajax it works but loads whole page, when I add filter then it stops working. This is how I did previously in fancybox 1.

Answer 1

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

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

$(".fancybox").fancybox();

Answer 2

I've achieved this using the afterLoad callback to update the content to find your particular element.

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

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

This allows us to just follow the link on mobile, but load the page inside fancybox on desktop without the header and footer etc.

Answer 3

With fancybox 3 its even more simple:

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

Look at the demo