리스트에서 유튜브 팝업 플레이(위토즈님 스킨에서 추출) > 그누보드5 팁자료실

그누보드5 팁자료실

리스트에서 유튜브 팝업 플레이(위토즈님 스킨에서 추출) 정보

리스트에서 유튜브 팝업 플레이(위토즈님 스킨에서 추출)

첨부파일

magnific-popup.css (6.8K) 47회 다운로드 2019-12-07 23:46:47
jquery.magnific-popup.min.js (19.7K) 10회 다운로드 2019-12-07 23:46:47

본문

수주받은 홈페이지 작업도 이제 70%에 접어드니 피로도도 증가하고

오늘 실수한것도 있고 해서 제목과 같은 팁을 하나 드립니다.

 

이 팁은 위토즈님 스킨 https://sir.kr/g5_skin/13115 에서 추출되었으며

필요한 뽀인트만 짚어서 간단하게 구현가능하도록 설명 드립니다.

(좋은 스킨을 작업해 주신 @위토즈 님께 진심으로 감사말씀 드립니다. ^^)

 

이 기능은 magnificPopup 이라는 JQuery 라이브러리이며 필요한 파일은 2개입니다.

 

 

1. 원하는 위치에 파일 업로드
magnific-popup.css

jquery.magnific-popup.min.js

두개의 파일을 기능이 필요한 페이지의 적당한 폴더에 업로드하시고 (저는 테마내에서 가끔 사용하는 기능이라 테마/js 와 테마/css 폴더에 넣어두고 호출했습니다.)

 

2. css, js 파일 호출


<?php
// 파일이 위치된 폴더를 지정
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/magnific-popup.css">', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery.magnific-popup.min.js"></script>', 0);
?>

 

3. 게시판 스킨에서 사용할 경우

일반적으로 <li> 태그가 시작되는 부분에서 썸네일을 생성합니다. 그 부분을 찾아서 맞게 수정하셔야 합니다. 원하는 유튜브 주소는 링크1번에 기록하시면 됩니다.


            <a href="<?php echo ($is_admin ? $list[$i]['href'] : $list[$i]['wr_link1']); ?>" class="gall_img <?php echo ($is_admin ? '' : 'popup-youtube'); ?>"> // 관리자일 경우에는 $list[$i]['href'] 즉 해당 게시글의 view 스킨을 불러오도록(수정이 용이)하고 아닐경우 wr_link1의 유튜브 주소를 popup-youtube 스크립트를 이용하여 호출
            <?php
            // 썸네일. (유투브 코드로 썸네일처리)
            $thumbsrc = '';
            $youtube_key = substr($list[$i]['wr_link1'],-11,11);
            $thumbsrc = 'https://img.youtube.com/vi/'.$youtube_key.'/mqdefault.jpg';
            if($thumbsrc) {
                $img_content = '<img src="'.$thumbsrc.'" alt="'.$list[$i]['subject'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">';
            } else {
                $img_content = '<span style="width:'.$thumb_width.'px;height:'.$thumb_height.'px">no image</span>';
            }
            echo $img_content;        
            ?>
            </a>

 

4. 스크립트 추가


<script>
<!--
$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
        //disableOn: 700, <-- 이부분 주석을 해제하면 모바일처럼 작은 화면에서 클릭시 해당 앱이나 유튜브 주소로 이동됩니다. 팝업 작동 안함. (위토즈님 스킨에서는 주석 해제되어있음)
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
//-->
</script>

 

위의 과정을 거치시면 일반적인 갤러리형 게시판 스킨에서는 정상적으로 썸네일을 자동 생성하고

팝업 플레이가 이루어집니다.

 

게시판 스킨이 아닌 단독 페이지에서 사용하실 경우에는 3번 과정을 생략하고

원하는 텍스트나 이미지에 a href 태그를 사용하시면 됩니다.

 


<a href="유튜브 주소" class="<?php echo ('popup-youtube'); ?>">더보기</a>

 

 

 

 

이상 아마추어 짜집러 뒷집돌쇠였습니다. 따수운 겨울 보내십시오.

추천
5

댓글 6개

멋진 소스를 알려주셔서 감사합니다.
그런데  3번과 4번을 어느 파일에서 수정 작업을 해야 하는지요?
초보자가 문의드립니다.
아마 해당 오류메세지가 뜨는 경우는 이용하는 웹호스팅에서 iframe 태그를 막았을 때 나타날겁니다.
iframe을 막았는지 일반 페이지에서 확인해보시는게 먼저일것 같습니다.
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT