jQuery 라이트 박스 진화 : 라이트 박스를 iframe 외부로로드

Question

jQuery 라이트 박스 에볼루션 플러그인을 사용하고 있으며 iframe 안에 사진 링크가 있습니다. 나는 그 라이트 박스를 iframe 밖에서 부모 창으로 열고 싶다. 자주 묻는 질문에서

, 난 내가 부모에 대한 몇 가지 코드를 넣을 수 있습니다 찾을 : 내 코드는 PHP는 동적, 인라인 생성되기 때문에

<script type="text/javascript"> 
    function frameload(iframe) { 
    var doc = iframe.contentWindow || iframe.contentDocument; 
    if (doc.document) { doc = doc.document; }; 

    $('.lightbox', doc.body).lightbox(); 
    }; 
</script> 

그러나이 일을 해달라고. 그래서 나는 헤드 태그의 플러그인을 '초기화'하지 않고 그냥 코드에서 호출합니다.

echo 
'<a style="cursor:pointer;" id="open_'.$emp_alias.'"></a>'; 

echo 
'<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#open_'.$emp_alias.'").click(function(ev) { 
     $.lightbox(['; 
     while($images_array = mysql_fetch_assoc($query_emp_images)) { 
    echo '"/destaques/'.$images_array['path'].'",'; 
    } 
    echo 
     ']); 
    ev.preventDefault(); 
    });          }); 
</script>'; 

부모 창에서이를로드 할 수있는 방법이있다 :

코드 내 조각 플러그인을 초기화가있다?

감사

Answer 1

그것은 문서입니다 :

9.How 나는 iframe이 내부에서 부모 창에 라이트 박스를 열 수 있습니까? 먼저해야 할 일은 부모 창에 스크립트를 설치하는 것입니다. 그러나 초기화하지 마십시오. .ready 대신, 아래의 코드를 추가 jQuery를 (문서)를 사용하지 마십시오 :

<script type="text/javascript"> 
function frameload(iframe) { 
    var doc = iframe.contentWindow || iframe.contentDocument; 
    if (doc.document) { doc = doc.document; }; 

    jQuery('.lightbox', doc.body).lightbox(); 
}; 
</script> 

삽입 온로드를 = "frameload (이);" iframe 마크 업에서.

<iframe src="iframe_child.html" onload="frameload(this);" width="500" height="500"> </iframe> 

하위 페이지에서 이미지를 클릭하면 라이트 박스가 상위 페이지에 표시됩니다. 문제가 발생하지 않도록하려면 하위 페이지에서 스크립트를 제거하십시오.

Answer 2

나를 위해 일한 간단한 해결 방법은 빈 자리 표시 자 링크를 생성 한 후, 부모 창에 라이트 박스를 초기화, 그리고 href를 변경하고 자리 표시 자 링크 클릭 기능 : 머리글 또는 바닥 글에서

을 부모 창

<a href="" class="lightbox" id="fakebox"></a> 

는 그래서 iframe에 내가 부모 함수를 호출

: 부모 윈도우의 몸에

<script type="text/javascript"> 
    $(function() { 
    $('.lightbox').lightBox(); 
    }); 

    function image_preview(url) 
    { 
    $('#fakebox').attr('href',url); 
    $('#fakebox').trigger('click') 
    } 
</script> 

어딘가에 fancybox 시작 :

<a href="JavaScript:void(0);" class="btn btn-tertiary btn-small" onClick="parent.image_preview('http://static8.depositphotos.com/1007989/1011/i/950/depositphotos_10118078-Grinning-Smiley.jpg')">Preview</a>