이미지에 Iframe 맞추기, 모달로

Question

많은 옵션을 시도했지만 아무 효과가 없습니다. 모달 상자에 iframe이를 열고 모든 게시물에 my website 클릭에

single.php 워드 프레스와 (Featherlight.js 사용) 문제는 내가 내 이미지에 모달 상자를 맞지 않을 수있다, 난 그냥 크기를 가지고하기로 결정 지금까지 html 코드에.

<div id="post"> 
<a href="#" data-featherlight="#featherlight-<?php echo get_the_ID(); ?>"> 

     <?php 
     if (has_post_thumbnail()) { 
     the_post_thumbnail('post-thumbnails'); 
     } 
     ?> 

    </a> 

<div class="myframe"> 
<iframe class="lightbox" src="<?php the_permalink(); ?>" width="400" height="600" id="featherlight-<?php echo get_the_ID(); ?>" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 

</div> 

자바 스크립트 또는 jquery를 사용하여 가능합니까? 난 단지 HTML, CSS와 약간의 PHP를 알고 있지만 내가해야만한다면 ...

고마워!

Answer 1

필자가 정확하게 '라이트 박스'로 페더 라이트를 사용하고 있고 상자가 열리면 상자 내부의 이미지와 동일한 크기로 상자의 크기를 조정하려고합니다.

그래서 기본적으로 당신이 원하는 무엇인가 :

는

1. 라이트는
2. 그 코드는 이미지
3. 업데이트에 <iframe>의 치수의 크기를 확인 되세요 연 후 트리거 코드를 추가합니다 이미지의 크기

내가 맞다면, 까다로운 부분 (특히 웹 개발을 처음 접하는 경우)은 모든 웹 개발자가 opment는 "문서"(웹 페이지)를 중심으로 회전하며, 프레임을 사용하면 여러 개의 "문서"로 바뀝니다. 하나는 이고 다른 하나는 인 페이지입니다.

먼저 라이트 박스가 열릴 때 트리거 할 논리를 작성해야합니다. Featherlight에 대한 설명서를 읽어야 만 "Featherlight"가 제공되는지 여부를 확인할 수 있습니다. 그렇지 않으면 사용자가 클릭하여 라이트 박스를 열 때 발생하는 "onClick"논리를 직접 추가해야합니다. 후자를 수행하는 경우 window.setTimeout을 사용하여 Featherlight가 두 번째 또는 두 번 대기하여 을 생성해야 할 수도 있습니다.

로직이 트리거되면 이로드 될 때까지 기다려야합니다. 이렇게하려면 onLoad 이벤트 핸들러를 onClick 핸들러의 iframe에 연결하면됩니다. 해당 처리기가 트리거되면 이로드되고 이미지의 크기를 확인할 수 있습니다.

실제로 문서에 액세스하려면 다음을 참조하십시오. SO : Accessing the document object of a frame with JavaScript.

일단 이미지에 액세스하면 (예 : iframeDocument.getElementsByTagAndClassName('img')[0], 페이지에 이미지가 하나만있는 경우) height 및 CSS 속성을 확인할 수 있습니다.

마지막으로 완료 한 후에는 height 및 width CSS 속성을 으로 변경하면 모두 설정해야합니다.