jQuery fancybox - целевой конкретный div #id в iframe

Question

Возможно ли использовать fancybox для загрузки specc div #id с другой страницы, а не для загрузки всей страницы через iframe?

Например, я могу использовать

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

с

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

, чтобы загрузить все «somepage.html» в IFRAME, но как бы я загрузить только содержимое из DIV с идентификатором «target» (например)?

Answer 1

Если страница находится в том же домене страницы, на котором вы открываете fancybox, тогда вы должны использовать опцию dataFilter для jQuery.ajax, чтобы отфильтровать возвращаемые данные до требуемого идентификатора цели.

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

Answer 2

Если метод находки не работает для вас, попробуйте filter на линии внутри dataFilter объекта.

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

Answer 3

Можно направить определенную часть страницы с помощью 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" 
         }); 
        } 
        }); 
        }