今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. テキストの色や背景色をフェード・アニメで変化「Color animation」
  3. 入力に応じてテキストエリアの高さを調節「Autosize」
  4. 進捗の割合(%)をプログレスバーで表示「ProgressBar」
  5. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

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>
スポンサーリンク

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