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

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > 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を利用することも可能です。 
他のオプションについては詳しくは配布サイトをご確認下さい。

記事移動

関連記事

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

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

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

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

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