jQuery fancybox - target specific div #id in iframe

Is it possible to use fancybox to load a specifc d开发者_开发百科iv #id from another page rather than loading the whole page via an iframe?

For example I can use

 $('#link-whole').fancybox({
                'width'             : '80%',
                'height'            : '80%',
                'type'              : 'iframe',
            });

with

<a id="link-whole" href="somepage.html">link 1</a>

to load all of 'somepage.html' into the iframe but how would I load JUST the content from a div with the id "target" (for example)?

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];
        }
    }
});

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

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

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"
                       });
                     }
                    });
                    }