I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > jQuery > URLだけでYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」

URLだけでYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」

URLを指定するだけで簡単にYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」を紹介します。

Youtube Video Gallery

 

Youtube video galleryとは

「Youtube video gallery」は、リスト形式で書いたYouTubeのリンクURLだけでYouTubeのギャラリーを自動作成してくれるjQueryプラグインです。
動画のサムネイルをクリックすると、liteboxで作成できるプラグインです。しかも、動画がページ遷移をせずにLightbox形式で閲覧出来ます。

DEMO

ダウンロード

スクリプトは下記URLからダウンロードしてください。

https://github.com/clanceyp/youtube-video-gallery

利用方法

html(<body>タグ内の記述)

下記のように動画へのリンクをリスト(<ul>タグ)で用意します。

                <ul class="youtube-videogallery">
                    <li><a href="http://www.youtube.com/watch?v=UCOC1YwNwZw">Call me gordie</a></li>
                    <li><a href="http://www.youtube.com/watch?v=CjgT8Af1kGc">Bad scooting</a></li>
                    <li><a href="http://www.youtube.com/watch?v=4psVnsYlBok">Good scooting</a></li>
                    <li><a href="http://www.youtube.com/watch?v=05Cgtg_N4eI">Knitting</a></li>
                </ul> 
html(<head>タグ内の記述)

下記のようにスクリプトを読み込みます。

    <link rel="stylesheet" href="./css/youtube-video-gallery.css" type="text/css" media="all" />
    <script type="text/javascript" src="./js/jquery.youtubevideogallery.js"></script>
    <script type="text/javascript">
        $( document ).ready(function( $ ) {
            $('ul.youtube-videogallery').youtubeVideoGallery();
        });
    </script>

Colorboxを利用する場合は、

    <link rel="stylesheet" href="../css/colorbox.css" type="text/css" media="all" />
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <link rel="stylesheet" href="./youtube-video-gallery.css" type="text/css" media="all" />
    <script type="text/javascript" src="./js/jquery.youtubevideogallery.js"></script>
    <script type="text/javascript">
        $( document ).ready(function( $ ) {
            $('ul.youtube-videogallery').youtubeVideoGallery( {plugin:'colorbox'});
        });
    </script>

上記のように、Colorboxを読み込んで、オプションに{plugin:'colorbox'}を利用して下さい。

その他特記事項

画像クリック時の再生にfancyboxを利用することも可能です。 
他のオプションについては詳しくは配布サイトをご確認下さい。

記事移動

関連記事

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Restriction
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Tagcloud