티스토리 뷰
YouTube API 마지막 시리즈인 Thumbnail에 효과를 주는 것에 대해 살펴 보도록 하겠습니다.
아래 내용은 저의 개인적인 취향이므로 참고하는 정도로 활용하시면 되겠습니다.
1. Title 글자 수 조정
위의 마지막 DEMO에서 Title의 글자수가 모두 나옵니다. 줄여 주고 싶을 경우 .substr(0,40) 를 추가하여 글자 수를 통일하거나 줄여줍니다. 40을 조정하여 원하는 글자수로 조정합니다.
html.push('<br>', title.substr(0,40), '</li>');}
2. Thumbnail Animation & Hover Effects
시간대 별로 넘버링된 이미지 번호, videoID와 image border를 활용하면 애니메이션과 후버 효과를 나타낼 수 있습니다.
html.push('<img src="',thumbnailUrl,'" width="120" height="90" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
function mousOverImage(name,id,nr){ if(name) imname = name; imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg"; imname.style.border = '3px solid #C2006D'; nr++; if(nr > 3) nr = 1; timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000); } function mouseOutImage(name){ if(name) imname = name; imname.style.border = '3px solid #fff'; if(timer) clearTimeout(timer); }
3. jQuery fadeTo Effects
jQuery fadeTo 효과를 사용해 반투명 효과를 줄수도 있습니다.
$(document).ready(function(){ $("ul.videos li").fadeTo("slow", 0.7); $("ul.videos li").hover(function(){ $(this).fadeTo("slow", 1.0);},function(){ $(this).fadeTo("slow", 0.7); }); });
'YouTube' 카테고리의 다른 글
YouTube nyroModal Gallery (6) | 2010.03.11 |
---|---|
유튜브 API - Player and Data API 2 (2) | 2010.03.09 |
유튜브 DATA API 2 -Thumbnail (2) | 2010.03.03 |
유튜브 API - Player and Data API (2) | 2010.03.02 |
유튜브 DATA API 1 source (1) | 2010.03.01 |
유튜브 DATA API 1 (4) | 2010.03.01 |
댓글