こんにちは。
今回はjQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみようです。
一般的には画像に使う事が多いライトボックス表示ですが、jQueryプラグインで簡単にできるようになった事もあり、画像だけでなく動画やhtml等もライトボックス表示する事が多くなりましたね。その中で今回はYouTubeをライトボックス表示をしてみましょう。
まずはダウンロードしてみよう！
下記のリンクをクリックして、Colorboxのサイトに行き、Downloadのボタンをクリックし、ダウンロードします。
Colorbox – a jQuery lightbox
http://www.jacklmoore.com/colorbox/
設置してみよう！
先ほど、ダウンロードしたファイルを設置していきます。
まずはダウンロードしたファイル（colorbox-master）のexample1〜example5の好きなデザインのcolorbox.cssとimagesを同じ階層に設置します。
colorbox.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="./colorbox/colorbox.css"> |
jQuery本体とjquery.colorbox-min.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./js/jquery.colorbox-min.js"></script> |
その下に下記の記述をします。
innerWidthは幅のサイズ、innerHeightは高さのサイズを記述します。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $(".youtube").colorbox({ iframe:true, innerWidth:425, innerHeight:344 }); }); </script> |
html部分は下記のように記述します。
1 2 3 | <a href="YouTubeのパス" class="youtube" title=""> YouTube </a> |
デモは下記をクリックして下さい。
YouTubeのボタンをクリックするとライトボックス表示します。
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
というふうに簡単に設置する事ができます。
以上でjQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみようでした。
