jQuery fancybox - target specific div #id in iframe

Question

Is it possible to use fancybox to load a specifc div #id from another page rather than loading the whole page via an iframe?

For example I can use

Answer 1

If the find method doesn't work for you, try filter on the line inside dataFilter object.

    return $(data).filter('#yourTargetID')[0];

Answer 2

If the page is on the same domain of the page that you are opening the fancybox on then you should be able to use the dataFilter option of jQuery.ajax to filter the returned data down to the target ID that you want.

$('#link-whole').fancybox({
    'width': '80%',
    'height': '80%',
    'type': 'ajax',
    'ajax': {
        dataFilter: function(data) {
            return $(data).find('#yourTargetID')[0];
        }
    }
});

Answer 3

You could target the specific part of the page using beforeShow

                  function opendialog(mypage) {
                  var linktoopen=mypage ;
                    $.fancybox({                        
                    'autoScale': false,
                    'transitionIn': 'elastic',
                    'transitionOut': 'elastic',
                    'speedIn': 500,
                    'speedOut': 300,                    
                    'width'         :  800,
                    'height'        :   410,
                    'autoDimensions': false,
                    'centerOnScroll': true,
                    'scrolling'   : 'no',
                    'type' :  'iframe',
                    'href' : linktoopen,
                      beforeShow: function(){
                          $(".fancybox-iframe").css({
                          margin  : "-380px 0 0",
                         height:"790px"
                       });
                     }
                    });
                    }