게시판
반응형 베이직 게시판 입니다. 특별한 기능은 없으며 가볍게 적용하실 수 있도록 그누보드 순정 스킨에서 리터칭 되었습니다. 테마를 사용하고 계시는 경우 그누폴더/theme/테마폴...
[펄스나인] 쉽게쓰는 UI/UX - 플로팅 팝업 (유튜브)
플로팅 팝업 이며 유튜브 재생을 예로 작업해 보았습니다.
꼭 동영상 재생이 아니더라도
갤러리 등 여러곳에 활용할 수 있을것 같습니다.
일반 버튼이나 링크, 게시판 리스트 등에서
클릭시 전체화면 레이어 팝업을 통해 유튜브 동영상을 재생 합니다.
data-video="_nHRRqlry3o" 부분에 유튜브 동영상 ID 만 넣어주시면 끝!
for문이 있는 게시판 리스트 등에 사용하시는 경우 동영상 ID를
여분필드(wr_1)에 저장한다고 가정하면
data-video="<?php echo $list[$i]['wr_1']; ?>" 와 같이 처리하신 후
<!-- 팝업 레이어 --> 부분과 <!-- 스크립트 --> 부분을
for문 밖에 하단부에 넣어주시면 됩니다.
위에 미리보기 Url 있습니다~
유용하게 쓰일 수 있기를 기대합니다!
감사합니다.
-------------------------------------------
2020-06-07 22:02:32 // 추가
동영상 영역 외 클릭시 팝업이 닫히지만
동영상이 계속 재생되는 문제가 있어 remove() 를 사용하여
확실하게 없애주도록 수정.
팝업을 닫은 후 다시 클릭하면 처음부터 재생 됩니다.
-------------------------------------------
구동조건 : 제이쿼리 라이브러리 (그누기본)
크로스브라우징 : 익스11, 엣지, 크롬, 웨일
乃 실천 하시는분 모두 로또 되시길 :D
버전 정보
테스트한 버전
5.4.2.6
호환 가능 버전
무관함
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
게시판
방명록 게시판 업뎃버전 + 모바일용 추가 모바일용이나 pc용이나 기능 자체는 같으니까 모바일용 사진만 올려놓겠습니다. m표시된게 모바일용입니다. 수정사항은 모바일용으로도 만들어...
게시판
해당 스킨이 적용된 게시판에서 글쓰기시에 정답입력란이있습니다 거기에 입력된 정답을 댓글을 통해 정확한 정답을 입력할경우 해당 댓글위에 "정답을 맞추셨습니다!" 문구가 출력되는 ...
게시판
별 기능은 아닌데 꼭 쓸라면 없길래 만들었습니다. 다들 여러 방법으로 쓰고 계시겠지만 혹여 쓰실 분이 계시다면~ 1. 다음에서 검색을 합니다. 2. 검색된 내용을 클릭합니다...
레이아웃
플로팅 팝업 이며 유튜브 재생을 예로 작업해 보았습니다. 꼭 동영상 재생이 아니더라도 갤러리 등 여러곳에 활용할 수 있을것 같습니다. 일반 버튼이나 링크, 게시판 리스트 등에서...
레이아웃
아미나 기본 타이틀 위젯에서 기존 캡션기능에서 타이틀, 설명, 버튼기능을 추가한 위젯입니다. 추가로 기존 타이틀위젯의 링크에 YOUTUBE주소를 넣으면 모달팝업형태로 확인할 수 있...
레이아웃
저같은 짜지퍼는.. 만들어진거 줍줍해서 레이아웃에 맞게 짜맞추려면 여간 귀찮은게 아닙니다..ㅎ 그래서! 만들어보았습니다. 가로 100% 라서 아무곳에나 때려넣어도 잘돌아 가게,...
게시판
https://sir.kr/g5_skin/19386?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%A9%EB%AA%85%EB%A1%9D 여기 있던 5....
최신글
그누보드 최신글 스킨을 이용한 메인 배너 스킨입니다. 스킨 적용위치는 상관없으나 head.php 파일의 <div id="container_wr"> 상위에 위치시켜주시면 됩니다....
댓글 52개
코드를 제공하는거 같은데 동영상 출력부분 iframe 쪽만
변경해주시면 될거같습니다~
110번째줄 뒤쪽에 https://youtube.com/embed/ 부분이 있습니다.
그부분을 https://player.vimeo.com/video/ 이렇게 바꿔주시면 됩니다.
그리고 아래부분에 유튜브 코드 입력란에 424765004과 같이
비메오 코드를 넣어주시면 됩니다.
<div class="divs">
<a data-video="_nHRRqlry3o" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
감사합니다 ^^
이번주 로또는 미리 사놔야겠네요 ㅎㅎ
총 여덜줄 64개의 유튜브 영상을
적용했는데 적용후 클릭하면
괭장히 심한 렉이 발생합니다.
이부분을 해결하려면 어떻게
해야할련지 조언부탁 드립니다.
for문 으로 반복 처리를 하시는경우
클릭시 보여질 유튜브가 들어가는 div 는 64개가 아닌
한개만 나오도록 해주셔야 합니다.
즉, 64개의 리스트가 한 페이지내에 있다고 해도
iframe 코드가 들어가는 div는 1개로 코딩이 되도록
변수처리로 돌아가게끔 해주셔야 합니다.
제가 말씀하신걸이해를 잘못해서요 ㅠㅠ
iframe은 추가한게 없습니다. ㅠㅠ
두번째건 클릭하시면 렉이심해서
클릭 안하시는게 좋을듯 합니다. 첫번째 텍스트문서만
클릭해서 확인해 보시면 말씀드린대로 8개씩 8줄 총 64개의
영상이 있는데 펄스나인님께서 위에 말씀하신대로 고칠수있는
방법을 예제로 올려주시면 정말 감사하겠습니다. ㅠㅠ
http://eunsolee.co.kr/youtube_test/video_test.txt
http://eunsolee.co.kr/youtube_test/video_test.html
<div class="video-popup" id="video-popup-closer2">
<div class="video-popup-closer" id="video-popup-closer2"></div>
</div>
<!-- 팝업 레이어 -->
이부분이 동영상 마다 들어가 있어서 그런것 같습니다~
동영상 클릭시 id로 호출을 하는데
id가 모두 동일하니 클릭하면 모두 한번에 띄워버려서 그런것 같네요.
id값을 변경해서 넣거나,
한개만 넣고 id값을 변수처리하거나 해야됩니다 ㅠ
맨아래에 한개만 들어가는것이 좋습니다.
혹시 저처럼 같은고민을 하는분이 계실지 몰라 수정한것을 올립니다.
<div class="divs">
<a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
<!-- //테스트 버튼 -->
<div class="divs">
<a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
<!-- //테스트 버튼 -->
<div class="divs">
<a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
<!-- //테스트 버튼 -->
<div class="divs">
<a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
<!-- //테스트 버튼 -->
<!-- 팝업 레이어는 마지막에 아래처럼 하나만 넣었습니다. -->
<div class="video-popup" id="video-popup-closer16">
<div class="video-popup-closer" id="video-popup-closer16"></div>
</div>
<!-- 팝업 레이어 -->
아래 이미지가 끝나는 부분 width="172" height="136"></div>에
width="172" height="136"></a></div> 등과 같이 </a> 태그를 붙여주셔야
동영상이 닫히지 않는 오류가 생기지 않으니 참고해주세요
펄스나인님 고맙습니다 덕분에 잘쓰고 있습니다 ^^
<div class="divs">
<a data-video="qM4WoEp1bHs" class="popyt mov_b2" style="cursor:pointer;">
<img src="images/001.png" width="172" height="136"></a></div>
<div class="divs">
<a data-video="_nHRRqlry3o" class="popyt mov_b2" style="cursor:pointer;">
<img src="mov_on.png">
</a>
</div>
[/code]
네 맞습니다~
a 태그는 닫아주셔야 합니다~
올려드린 코드에는 닫혀있습니다 ㅎㅎ
해결되셨다니 다행 입니다 ^^
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
잘 써주십시요 ^^
감사합니다.
좋은 말씀 감사합니다~ 잘 써주십시요!
나중에 시간될때 옮겨두겠습니다 ㅠㅠ
캡쳐 그대로입니다 ..ㅎ
감사합니다