YouTubeギャラリーを作成「Youtube video gallery」を作成するjQueryプラグイン「Youtube video gallery」を紹介します。
jQueryプラグイン「Youtube video gallery」
「Youtube video gallery」は、YouTubeのリンクURLとリストタグだけで簡単にYouTubeのギャラリーが作成できるプラグインです。しかも、動画がページ遷移をせずにLightbox形式で閲覧出来ます。
デモをご覧ください。YouTubeギャラリーが楽しめます。
「Youtube video gallery」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Youtube video gallery のデモでーす。" > |
< title >Youtube video gallery - jQuery Plugin Demo</ title > |
< script src = "http://code.jquery.com/jquery-2.0.0.js" ></ script > |
< script src = "jquery.youtubevideogallery.js" ></ script > |
< link rel = "stylesheet" href = "youtube-video-gallery.css" type = "text/css" /> |
#container {margin: 0 auto;width:600px;} |
< p >< a href = "https://webkaru.net/jquery-plugin/youtube-video-gallery/" >「jQueryプラグインまとめ」に戻る</ a ></ p > |
< ul class = "youtube-videogallery" > |
< li >< a href = "http://www.youtube.com/watch?v=Vif2_wLBTlU" >Creative Commons - Puffy clouds and Trees Time Lapse</ a ></ li > |
< li >< a href = "http://www.youtube.com/watch?v=0JQ1UwjneNI" >Time Lapse Aurora Borealis January 2012</ a ></ li > |
< li >< a href = "http://www.youtube.com/watch?v=cxsBvwbh5aE" >Cool star fall - night sky timelapse for Creative Commons V09620e</ a ></ li > |
< li >< a href = "http://www.youtube.com/watch?v=HttdxjYK7EQ" >Earth seen from Space (TimeLapse HD 1080p)</ a ></ li > |
< li >< a href = "http://www.youtube.com/watch?v=IbzuRn4Sa2c" >Creative Commons - Sun Emerging From Behind the Clouds</ a ></ li > |
< li >< a href = "http://www.youtube.com/watch?v=YMOvz2TL78o" >Creative Commons - Heavy Rainstorm in the Trees and Streets</ a ></ li > |
$(document).ready(function(){ |
$("ul.youtube-videogallery").youtubeVideoGallery( ); |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。