YouTube nyroModal Gallery

2010.03.11 19:15


jQuery Plugin nyromodal을 이용해 유튜브 갤러리를 만들 수 있습니다.
정말 간단합니다. 이 외에도 많은 라이트박스 효과가 있습니다. Videobox


<script type="text/javascript" src="http://www.movyx.com/nyromodal/js/jquery-1.3.2.min.js"></script> 
<link rel="stylesheet" href="http://www.movyx.com/nyromodal/styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.movyx.com/nyromodal/js/jquery.nyroModal-1.5.5.pack.js"></script>
<SCRIPT type="text/javascript">
function showMyVideos(json) {
  var data = json.data;
  var items = json.data.items || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < items.length; i++) {
    var title = json.data.items[i].title;
    var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
    var videoID = json.data.items[i].id;
    html.push('<li><a href="http://www.youtube.com/v/',videoID,'" class="nyroModal">');
    html.push('<img src="',thumbnailUrl,'" width="120" height="90"></a>');
    html.push('<br>', title, '</li>');}
    html.push('</ul><br style="clear: left;"/>');
 
  document.getElementById('videolist').innerHTML = html.join('');
 
}
$(function() {
$.nyroModalSettings({
processHandler: function(settings) {
$.nyroModalSettings({
type: 'swf',
height: 385,
width: 640});
}
});        
});
</SCRIPT>
<STYLE>
ul.videos li {
float: left;
width: 126px;
margin:0px;
padding:1px;
font-size: 11px;
font-family: Verdana, Arial;
height: 185px;
cursor:pointer;
}
ul.videos li img {
border: 3px solid #fff;
}
</STYLE>

<DIV id=videolist></DIV>  
<SCRIPT type=text/javascript src="http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?v=2&alt=jsonc&callback=showMyVideos&max-results=10&format=5"></SCRIPT>

신고

'YouTube' 카테고리의 다른 글

Videobox: Lightbox for YouTube videos  (0) 2010.03.18
YouTube Playlists and Autoplay  (2) 2010.03.13
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
  1. 제이쿼리인가요?
    어찌 오늘 하루는 잘 보내셨는지.. (__)
    날이 개려 하네요.
    내일은 좀 더 밝은 햇살을 보지 않을까 기대해봅니다.
    TYZEN님 그럼 남은 저녁시간도 즐겁게 보내세요. :)

  2. 답변이 늦어서 죄송합니다.

    몇일 바빠서 들어와 보질 못했네요

    좋은 주말 되세요

  3. 좋은정보 잘 봤습니다..
    감사합니다..^0^

  4. 감사합니다.

    좋은 주말 되세요

  5. 김미정

    성공했어요. fancybox는 어려워서 여기 공개해주신 소스가지고 quvic.js파일을 찌지고뽁고하니까 결국 되긴하네요. ^^
    딱한가지 검색시에는 전체화면으로 바뀌는 문제가 생기긴하지만, 문제없습니다.
    아예 검색을 빼버렸거든요.^^
    이런 훌륭한 소스를 만들어주신 개발자님께 다시한번 감사의말씀 드립니다.^^

  6. 축하드립니다.

    새해 복 많이 받으세요~!

티스토리 툴바