그누보드 - 아이프레임 전용게시판

아이프레임 전용게시판 정보

게시판 아이프레임 전용게시판

첨부파일

iframe.zip (412.9K) 61회 다운로드 2021-08-27 16:29:40

테스트한 버전5.4.9

호환 가능 버전아마도 모두

본문

아이프레임 전용게시판입니다.

상단 링크글은 아이프레임이 적용된 모습이고 pc와 모바일 패이지를 따로 만들긴 했지만 반응형입니다.

게시판의 진짜 모습은

1. 가로 960px - http://www.mediaplayer.kr/main/iframe/1

2. 가로 100% - http://www.mediaplayer.kr/main/iframe/2 --- 반응형

이 게시판은 내용물이 좌상단에 찰싹 붙어 나타나고 나머지 부분은 보이지 않습니다.

단 관리자의 경우 pc 디바이스에서만 내용물 하단에 기본버튼들이 나타납니다.

기본적으로 자바스크립트 전용게시판과 사용법이 동일합니다. - https://sir.kr/g5_skin/45542 - 대신 미리보기 에디터를 스킨 디렉토리 안에 넣어 놓은 것만 다릅니다.

--------------------

1. 먼저 게시판 권한에서 글읽기 권한만 모두가 볼 수 있게 1을 주고 나머지 권한은 전부 10으로 주세요.

988289629_1630048075.1528.jpg

--------------------

2. 상단 파일 경로와 하단 파일 경로를 빈칸 처리합니다.

##### 5.4.18 버전 이후로 옵션이 바뀌었습니다. #####

그래서 상단파일경로는 _head.sub.php 로 하단파일경로는 _tail.sub.php 로 입력해 주세요.

이렇게 하면 이전의 5.4버전도 모두 먹습니다.

988289629_1630048242.3259.jpg

--------------------

3. 내용물을 반응형으로 만들지 않았다면 pc 아이프레임과 모바일 아이프레임은 본인들이 재주껏 환경에 맞추어서 각각 따로 만들면 됩니다.

-------------------

4. 내용물이 반응형일 때 아이프레임으로 거는 방법입니다.

1) 내용물의 가로 세로 비율을 뽑아 세로 나누기 가로의 수치를 이용합니다.

저는 가로 960에 세로 540짜리 이미지를 기준으로 만들었으므로 그 비율은 540 / 960 이 되겠지요.

2) 아래의 소스로 걸어줍니다.


<div id=iframeDiv><iframe src=게시글주소 style=width:100%;height:100%;display:block frameborder=0 scrolling=no></iframe></div>
<script>
onresize = function() { iframeDiv.style.height = iframeDiv.offsetWidth * 540 / 960 + "px"; }
onresize();
</script>

아이프레임의 가로 세로길이를 모두 100 퍼센트로 준 다음...

하단 스크립트로 div 의 세로길이를 div 의 offsetWidth 에 540 / 960 을 곱한 값을 픽셀로 뺀 수치입니다.

여기서 onresize 이벤트가 필요한 이유는 모바일로 접속시 세로모드에서 가로모드로 바뀔 때거나 그 반대일 때 다시 한번 세로 길이를 갱신해줘야 하기 때문에 필요합니다.

중요한 건 게시글의 내용 자체가 반응형 퍼센트로 만들어져 있어야 하겠지요.

제가 게시글에서 사용한 소스는 아래와 같습니다. 여기서도 비슷한 방식으로 세로길이를 맞추고 있습니다.


<div id=mainDiv style=width:100%;overflow:hidden>
    <div id=imgDiv style=width:100%;height:100%;cursor:pointer;background-size:contain;background-image:url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)>
        <video id=videoPlayer style=width:100%;mix-blend-mode:screen;display:block src=https://blog.kakaocdn.net/dn/c07nfJ/btrdmAHtO9f/zLh5ghgQVVa5vgDES5a4e1/tfile.mp4 loop muted></video>
        <audio id=audioPlayer src=https://blog.kakaocdn.net/dn/dBuOu2/btrdivHnfKM/bvMaixvAJUK3CN1LAL2oO0/tfile.mp3 loop></audio>
    </div>
</div>
<script>
playerMode = 1;
mainDiv.onclick = function() {
    if (playerMode) { audioPlayer.play(), videoPlayer.play(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/dpxDdN/btrdj677VT5/FP3chnNKIkRUSzrnNxCxXk/img.jpg)", playerMode = 0; }
    else { audioPlayer.pause(), videoPlayer.pause(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)", playerMode = 1; }
}
onresize = function() { mainDiv.style.height = mainDiv.offsetWidth * 540 / 960 + "px"; }
onresize();
</script>

크롬과 안드로이드에서만 확인하였고 그누 순정에서 작업하였습니다.