Search code examples
jqueryajaxjquery-pluginsfancybox

load specific div in modal window using fancybox

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.

Solution

  • 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();