2010-06-16 4 views
6

iframe을 통해 전체 페이지를로드하는 대신 fancybox를 사용하여 다른 페이지에서 특정 div #id를로드 할 수 있습니까?jQuery fancybox - iframe의 특정 div #id를 대상으로 지정

예를 들어 나는

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

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

은 iframe 대응에 'somepage.html'모두를로드하는 데 사용할 수 있지만 내가 어떻게 ID로 사업부에서 바로 내용을로드 할 것 "목표"(예를 들면)?

답변

14

페이지가 fancybox를 여는 페이지의 동일한 도메인에 있으면 jQuery.ajax이라는 dataFilter 옵션을 사용하여 반환 된 데이터를 원하는 대상 ID로 필터링 할 수 있어야합니다.

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

완벽하게 사용하여 페이지의 특정 부분을 대상으로 수 있습니다! 고맙습니다!! 대상 페이지가 다른 도메인에있는 경우이를 수행하는 방법이 있습니까? –

+0

JSONP 요청 및 http://pipes.yahoo.com/pipes/ 사용으로 가능합니다. – PetersenDidIt

4

find 메서드가 효과적이지 않으면 dataFilter 개체 안의 행에서 filter을 시도하십시오.

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

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