복붙노트

[JQUERY] 은 iframe에서 부모에 Fancybox 전화

JQUERY

은 iframe에서 부모에 Fancybox 전화

해결법


  1. 1.첫째, 당신은 (노력하지 가치가 패치 fancybox의 v1.3.x) 그렇게 완벽에 fancybox의 버전 2.x를 사용한다

    첫째, 당신은 (노력하지 가치가 패치 fancybox의 v1.3.x) 그렇게 완벽에 fancybox의 버전 2.x를 사용한다

    둘째,이 두 페이지에 있어야합니다, 제대로 초월 fancybox하기 위해 상위 페이지와 iframe이 페이지로드 JQuery와 및 fancybox의 CSS와 JS 파일,

    그래서 두 페이지에 당신은 같은 적어도 뭔가를해야한다 :

    <link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
    

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
    

    다음은 iframe (아이) 페이지에 스크립트는 기본적으로 동일 (단, 버전 2.x에 대한 올바른 fancybox 옵션 ... 여기 설명서를 확인)

    $(".video").click(function() {
            $.fancybox({
                'padding'       : 0,
                // more options (v2.x) etc
    

    대신이의

            $.fancybox({
    

    이 작업을 수행:

            parent.$.fancybox({
    

    다음 fancybox iframe이 페이지의 경계에서 상위 페이지에 표시됩니다

    업데이트 : 여기 데모 페이지


  2. 2.IMG가 iframe을에 있기 때문에 다른 웹 페이지입니다. JQuery와 index.html을하지만 IMG 나던에 그래서, 그게 왜 JQuery와 이미지에 도착하지 못할.

    IMG가 iframe을에 있기 때문에 다른 웹 페이지입니다. JQuery와 index.html을하지만 IMG 나던에 그래서, 그게 왜 JQuery와 이미지에 도착하지 못할.

    아마 이런 식으로 뭔가를 사용하여 ...하지만 난 그것이 작동 것이라고 생각하지 않습니다

    index.html을 스크립트 부분에

    $(document).ready(function () {
        //function to active fancybox on the thumbs class inside the iframe
        //Not sure it works on iframes, probably it doesnt.
        $("#iframeID.thumbs").fancybox();
    });
    

    그리고 iframe이 선언에 ID를 추가

    그러나, 내 조언은 대신 iframe을의 된 div를 사용하는 것입니다. 또한 비 obstrusive 자바 스크립트에 대한 이미지에서를 onclick을 제거해야합니다.

    http://fancybox.net/howto : 튜토리얼을 확인 당신은 스페인어에 비슷한 자습서를 원하는 경우에 당신도 내 사이트를 확인할 수 있습니다.


  3. 3.필자는 이전에이 문제가 발생하고 해결책을 찾을 수 있었다. 여기에 IV가 할 것입니다. 내 iframe이 페이지에서 나는 HREF 예와 부모 창을 호출 onclick을 = "callMe ( 'www.google.com')"또는 사진은 "/images/pics.png"경우 내 상위 페이지에서이 스크립트를 호출

    필자는 이전에이 문제가 발생하고 해결책을 찾을 수 있었다. 여기에 IV가 할 것입니다. 내 iframe이 페이지에서 나는 HREF 예와 부모 창을 호출 onclick을 = "callMe ( 'www.google.com')"또는 사진은 "/images/pics.png"경우 내 상위 페이지에서이 스크립트를 호출

    <script type="text/javascript"> 
     function callMe(site){ 
          $(".sample").fancybox({ 
             'width' : '97%', 
             'height' : '97%', 
             'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
          }); 
          readyFancy() call to trigger the decoy link page 
     } 
    
     function readyFancy(){ 
          $("a.sample").trigger("click"); 
     } 
     </script> 
    

    내 부모 HTML에서 우리는 미끼 링크 (이 부하 fancybox의 예에서입니다) 권리

    <body> 
    <a href="#" class="sample"></a> 
    </body> 
    

    현재 작업 예제를 다운로드 할 수 있습니다 .. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

  4. from https://stackoverflow.com/questions/8853727/call-fancybox-in-parent-from-iframe by cc-by-sa and MIT license