vimeo 썸네일을 jquery 로 뽑아오려고 했는데… 문법이 딸리네요. ㅠㅠ;;;; 정보
vimeo 썸네일을 jquery 로 뽑아오려고 했는데… 문법이 딸리네요. ㅠㅠ;;;;관련링크
본문
일단 계획은 그누보드 게시판 링크에 유튜브나 비메오 주소를 입력하면 동영상을 보여주는 식의 스킨을 만들려고 하고 있는데요;; 플레이어는 어찌 어찌 쉽게 넘어갔는데, 리스트에서 썸네일 뽑아오는 문제가 골치가 아프네요.
계정에서 php5 로 업그레이드 하면 쉬운 일일 것 같긴 한데… 그건 또 사정상 어렵고…
그래서 jquery 로 vimeo 썸네일을 뽑아오는 방법을 택하려고 하고 있는데요. 문법을 거의 몰라서 어려움을 겪고 있습니다. ㅠㅠ;;
계획은 클래스가 vimeothumb 인 img 태그에서 rel 값을 vimeo 의 video id 로 읽은 다음 그걸 json으로 넘겨 썸네일을 보여주는 거였는데요.
( 이런식이죠. <img class='vimeothumb' rel='51478122' /> )
이미지가 하나일 때는 잘 되는데, 여러개인 경우는 어떻게 해야할런지 모르겠네요. ㅠㅠ;;;;
아래처럼 스크립트를 짜봤는데 원래의 이미지 태그를 어떻게 특정해야할런지…;;;
jquery 어렵네요. ㅠㅠ;;
<div id="videolist">
<img class="vimeothumb" rel="51478122" alt="title1" />
<img class="vimeothumb" rel="51430433" alt="title2" />
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
//<!--<![CDATA[
$(function(){
$("#videolist .vimeothumb").each(function(index){
var vimeoVideoID = $(this).attr("rel");
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
$(".vimeothumb").attr('src', data[0].thumbnail_medium);
});
});
});
//]]>-->
</script>
http://jsfiddle.net/zeze/8fEXt/1/
PHP스쿨에서 답을 얻었네요. :)
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=216661&page=&sfl=&stx=&spt=&page=&cwin=#c_216682
아래는 미니짱님의 답글입니다.
class로 변경시 같이 적용이되어 문제신거죠?
rel => 같은 파일명이 없다면 id로 적용하면 간단히 되긴하는데...
다른방법도 있겠지만 참고하세요
<div id="videolist">
<img class="vimeothumb" rel="51478122" id="51478122" alt="title1" />
<img class="vimeothumb" rel="51430433" id="51430433" alt="title2" />
</div>
<script type="text/javascript">
//<!--<![CDATA[
$(function(){
$("#videolist .vimeothumb").each(function(index){
var vimeoVideoID = $(this).attr("id");
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
$("#"+vimeoVideoID).attr('src', data[0].thumbnail_medium);
});
});
});
//]]>-->
</script>
그리고 조금 변경해서 했더니 잘 되네요. :)
http://jsfiddle.net/zeze/8fEXt/6/
계정에서 php5 로 업그레이드 하면 쉬운 일일 것 같긴 한데… 그건 또 사정상 어렵고…
그래서 jquery 로 vimeo 썸네일을 뽑아오는 방법을 택하려고 하고 있는데요. 문법을 거의 몰라서 어려움을 겪고 있습니다. ㅠㅠ;;
계획은 클래스가 vimeothumb 인 img 태그에서 rel 값을 vimeo 의 video id 로 읽은 다음 그걸 json으로 넘겨 썸네일을 보여주는 거였는데요.
( 이런식이죠. <img class='vimeothumb' rel='51478122' /> )
이미지가 하나일 때는 잘 되는데, 여러개인 경우는 어떻게 해야할런지 모르겠네요. ㅠㅠ;;;;
아래처럼 스크립트를 짜봤는데 원래의 이미지 태그를 어떻게 특정해야할런지…;;;
jquery 어렵네요. ㅠㅠ;;
<div id="videolist">
<img class="vimeothumb" rel="51478122" alt="title1" />
<img class="vimeothumb" rel="51430433" alt="title2" />
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
//<!--<![CDATA[
$(function(){
$("#videolist .vimeothumb").each(function(index){
var vimeoVideoID = $(this).attr("rel");
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
$(".vimeothumb").attr('src', data[0].thumbnail_medium);
});
});
});
//]]>-->
</script>
http://jsfiddle.net/zeze/8fEXt/1/
PHP스쿨에서 답을 얻었네요. :)
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=216661&page=&sfl=&stx=&spt=&page=&cwin=#c_216682
아래는 미니짱님의 답글입니다.
class로 변경시 같이 적용이되어 문제신거죠?
rel => 같은 파일명이 없다면 id로 적용하면 간단히 되긴하는데...
다른방법도 있겠지만 참고하세요
<div id="videolist">
<img class="vimeothumb" rel="51478122" id="51478122" alt="title1" />
<img class="vimeothumb" rel="51430433" id="51430433" alt="title2" />
</div>
<script type="text/javascript">
//<!--<![CDATA[
$(function(){
$("#videolist .vimeothumb").each(function(index){
var vimeoVideoID = $(this).attr("id");
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
$("#"+vimeoVideoID).attr('src', data[0].thumbnail_medium);
});
});
});
//]]>-->
</script>
그리고 조금 변경해서 했더니 잘 되네요. :)
http://jsfiddle.net/zeze/8fEXt/6/
댓글 전체