web制作

lightboxでYouTube表示するならlightcase.jsが優秀

lightboxでYouTubeを表示させたいけど、対応していない。

lightboxのような機能のjsできれいな表示のものはないだろうか

というかた向けの記事です。

lightboxはモータルウィンドウで、拡大写真を表示させることができるjsプログラムです。

フリーで使えるプログラムなので、web制作の仕事で必要になると使うことがあります。(簡単で便利!)

lightboxはこちら

しかし、lightboxはyoutubeなどの動画再生やiframeに対応していません。

今まで、lightbox系プラグインは、いくつか使ってきました。

その中でもlightcase.jsは、Youtube再生やレスポンシブ対応、表示アニメーションも選べたり、充実した機能を簡単に使えて便利でした。

詳しく紹介したいと思います。

lightcase.jsとは

参照: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.」からダウンロードします。

lightcase.js

2.ダウンロードしたzipファイルを解凍し、中にある「src」フォルダを自分のサイトフォルダに移動します。

2.head内ににプログラムを入れます。(srcの内容がかわるときは調整してください)

4.サムネイルとリンクして表示する大きな画像を選びます。data-rel=”lightcase”を入れると使えるようになります。

画像を配置する場合

Youtubeを配置する場合

ページ送りをつけたり、グループ表示ににしたい場合は、data-rel=”lightcase:グループ名”(例:data-rel=”lightcase:myCollection”)の設定が必要です。

5.保存して完了。

6.必要に合わせてオプション指定をどうぞ。

Lightcase|API

まとめ

lightbox系プラグインはいくつかありますが、lightcaseが一番のお気に入りです。

参考になれば幸いです。