리스트에서 유튜브 팝업 플레이(위토즈님 스킨에서 추출) 정보
리스트에서 유튜브 팝업 플레이(위토즈님 스킨에서 추출)첨부파일
본문
수주받은 홈페이지 작업도 이제 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
5
댓글 6개
좋은 팁 고맙습니다.
멋진 소스를 알려주셔서 감사합니다.
그런데 3번과 4번을 어느 파일에서 수정 작업을 해야 하는지요?
초보자가 문의드립니다.
그런데 3번과 4번을 어느 파일에서 수정 작업을 해야 하는지요?
초보자가 문의드립니다.
사용하시려는 갤러리형 스킨의 list.skin.php 에서 수정하셔야 합니다.
친절한 답변에 감사드립니다.
멋진 주말되세요.
멋진 주말되세요.
팝업까지 띄워지는데요.
'이 콘텐츠를 프레임에 표시할 수 없음' 이라고 표시되면서 블랙화면이 뜨네요 ㅜ
'이 콘텐츠를 프레임에 표시할 수 없음' 이라고 표시되면서 블랙화면이 뜨네요 ㅜ
아마 해당 오류메세지가 뜨는 경우는 이용하는 웹호스팅에서 iframe 태그를 막았을 때 나타날겁니다.
iframe을 막았는지 일반 페이지에서 확인해보시는게 먼저일것 같습니다.
iframe을 막았는지 일반 페이지에서 확인해보시는게 먼저일것 같습니다.