今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. アニメーションでテキストが切り替わる「Words Rotator」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. 年月の選択ボタンを実装「Multiple Month Picker」
  5. 指定した要素をドラッグして移動「tinyDraggable」

YouTubeギャラリーを作成「Youtube video gallery」

スポンサーリンク

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)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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"/>
<style>
#container {margin: 0 auto;width:600px;}
</style>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/youtube-video-gallery/">「jQueryプラグインまとめ」に戻る</a></p>

<div id="container">
<h1>YouTube ぎゃらり〜</h1>
  <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>
  </ul>
</div>
<script>
$(document).ready(function(){
  $("ul.youtube-videogallery").youtubeVideoGallery(  );
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)