lightboxでYouTubeを表示させたいけど、対応していない。
lightboxのような機能のjsできれいな表示のものはないだろうか
というかた向けの記事です。
lightboxはモータルウィンドウで、拡大写真を表示させることができるjsプログラムです。
フリーで使えるプログラムなので、web制作の仕事で必要になると使うことがあります。（簡単で便利！）
しかし、lightboxはyoutubeなどの動画再生やiframeに対応していません。
今まで、lightbox系プラグインは、いくつか使ってきました。
その中でもlightcase.jsは、Youtube再生やレスポンシブ対応、表示アニメーションも選べたり、充実した機能を簡単に使えて便利でした。
詳しく紹介したいと思います。
lightcase.jsとは
参照：lightcase.js公式サイト
lightcase.jsはjqueryベースの画像表示lightboxプラグインです。
トランジションにはCSS3を使用し、
Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+以降での表示に対応しています。
ライセンスはWordpressと同じGPL licenseです。
lightcase.jsのメリット
画像の他にYouTubeやVimeo、iframe、AjaxFormも表示可能です。
また、アニメーションも数種類からえらぶことができます。
何よりも便利なのがレスポンシブ対応なところ。
ボタンもモバイルにあわせて表示が変わるので便利です。
lightcase.jsの使い方
1.以下URLの「Get it Now.」からダウンロードします。
2.ダウンロードしたzipファイルを解凍し、中にある「src」フォルダを自分のサイトフォルダに移動します。
2.head内ににプログラムを入れます。（srcの内容がかわるときは調整してください）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<link rel="stylesheet" type="text/css" href="src/css/lightcase.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="src/js/lightcase.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[data-rel^=lightcase]').lightcase({ transition: 'fade', showSequenceInfo: false, showCaption: false } ); }); </script> |
4.サムネイルとリンクして表示する大きな画像を選びます。data-rel=”lightcase”を入れると使えるようになります。
画像を配置する場合
|
1 |
<a href="拡大表示される大きな画像のURL" data-rel="lightcase" ><img src="クリックするサムネイル画像のURL" alt=""/></a> |
Youtubeを配置する場合
|
1 |
<a data-rel="lightcase" href="youtubeのURL?rel=0&controls=0&showinfo=0">Youtube video</a> |
ページ送りをつけたり、グループ表示ににしたい場合は、data-rel=”lightcase:グループ名”（例：data-rel=”lightcase:myCollection”）の設定が必要です。
5.保存して完了。
6.必要に合わせてオプション指定をどうぞ。
まとめ
lightbox系プラグインはいくつかありますが、lightcaseが一番のお気に入りです。
参考になれば幸いです。
