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

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

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

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

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

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

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

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

jquery.magnific-popup.min.js

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

2. css, js 파일 호출

[code]

<?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);

?>

[/code]

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

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

[code]

            <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>

[/code]

4. 스크립트 추가

[code]

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

        fixedContentPos: false
    });
});
//-->
</script>

[/code]

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

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

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

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

[code]

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

[/code]

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