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

 $('#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)?

Answer 1

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 2

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

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