前回は、シンプル、ギャラリー編と称して、lightboxの違いをわずかですが、紹介しました。 今回は動きのあるlightboxプラグインを次いでご紹介。
sexylightbox
使用ライブラリ:mootool.js(ver.1.2)
対応形式:画像
実行すると上からモーダルウインドウが勢い良く振ってくるライトボックス。エンターテイメントなサイトで使うと躍動感を出したり、サイトの印象にインパクトが出ます。
使い方:
1.ダウンロードした画像フォルダとcss,jsファイルなどを任意の位置へ配置して呼び出し。
<link href="SexyLightBox/sexylightbox.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="SexyLightBox/mootools.js"></script> <!-- /ver 1.2 --> <script type="text/javascript" src="SexyLightBox/sexylightbox.js"></script>
※.画像ファイルをドキュメントルート以外に配置した場合は sexylightbox.jsの以下を修正してください。
sexylightbox.jsの28行目の以下を任意の位置、任意のファイル名に。
例:imagesdir :’xxx/sexyimages’,
2.呼び出し画像のアンカーリンクにクラス指定をします。
<a href="image-1.jpg" title="ここにテキストが入ります">
<img src="base-set/img/thumb-1.jpg" alt="thumb1">
</a>
グループ化したい時は”rel=group”などでそろえればグループ化となります。
3.最後にjavascriptで実行します
<script type="text/javascript"> window.addEvent('domready',function(){
new SexyLightBox({ find:'sexylightbox',
color:'white',
hexcolor:'#FFFFFF',
captionColor:'#000'
});
}); </script>
これだけじゃなくて、映像も使いたい、jQueryのバージョン欲しい方は有料ですが、Sexylightbox2もあります。
bPopup.js
使用ライブラリ:jQuery
対応形式:画像、iframe,flash
一見すると、シンプルなモーダルウインドウですが、このプラグインは
- ページをスクロールしても追尾してくる。
- ウインドウ表示位置の自由指定
- ウインドウ表示方法の指定(画面横から出てくる、画面丈夫から出てくる)
- ウインドウ同士を重ねることができる
- とにかく動きが滑らか
- カスタマイズ度が高い
1.ダウンロードしたjsファイルとjQueryを呼び出します。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery_lib/jquery.bpopup.min.js"></script>
2.呼び出したいものを以下のように記述
<script type="text/javascript">
$(function(){ $(element_to_pop_up).bPopup({ });
</script>
上記の使い方はあくまで基本で、細かい指定がまた必要かと思います。 それでも、一度使い方を覚えると幅広く使えるタイプだと思います。 easing.jsを併せて使えば、さらに幅は広がります。
ページ全体で使用するlightBoxたち
多機能ではなく、高機能型のlighboxをこのまま紹介。使い方は簡略していきます。
Superbox
使用ライブラリ:jQuery
対応形式:画像
これもlightbox系プラグインです。画像ギャラリー特化ですが、レスポンシブに対応もしており、使用するためののcssファイル、jsファイルも合計で4KBという超軽量。 イラストサイト、写真サイトなど、画像を見せたいサイトで活躍してくれると思います。
photobox
使用ライブラリ:jQuery
対応形式:画像、youtube,vimeo
HTML5、CSS3を使用したギャラリー型lightboxプラグイン。スマホのフリック操作にも対応しています。
終わりに
前回は5つ、今回は4つだけの紹介ですが、lightboxも広さが分かるものを選んでみました。 ここまでも十分にすごいんですが、まだまだ進化していくような気もしたりします。それでも、lightboxの本来の「画像を拡大表示させてユーザーへ意識を寄せる」という枠は忘れずに考えることは注意したいところです。見てる人が見やすく、かつ楽しめるlighboxプラグインを見つけるきっかけになればと思います。