JQuery fancybox - target specific #id div in iframe

Question

Is it possible to use fancybox to load the specified div #id from another page, and not to load the whole page through an iframe?

For example, I can use

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

from

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

to load all “somepage.html” into an iframe, but how can I load the JUST content from a div with the identifier “target” (for example)?

Answer 1

If the page is in the same domain of the page where you open fancybox, then you should use the dataFilter jQuery.ajax option to filter the returned data to the desired target identifier.

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

Answer 2

If the find method does not work for you, try filter on the line inside the dataFilter object.

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

Answer 3

You can target a 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" }); } }); }