こんにちは。
今回は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内に読み込みます。
[html] [/html]
jQuery本体とjquery.colorbox-min.jsを/bodyの手前に読み込みます。
[html]
[/html]
その下に下記の記述をします。
innerWidthは幅のサイズ、innerHeightは高さのサイズを記述します。
[javascript]
[/javascript]
html部分は下記のように記述します。
[html]
YouTube
[/html]
デモは下記をクリックして下さい。
YouTubeのボタンをクリックするとライトボックス表示します。
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
というふうに簡単に設置する事ができます。
以上でjQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみようでした。
