~アクション・高級仕様編~Tweet前回は、シンプル、ギャラリー編と称して、lightboxの違いをわずかですが、紹介しました。今回は動きのあるlightboxプラグインを次いでご紹介。実行すると上からモーダルウインドウが勢い良く振ってくるライトボックス。エンターテイメントなサイトで使うと躍動感を出したり、サイトの印象にインパクトが出ます。使い方:1.ダウンロードした画像フォルダとcss,jsファイルなどを任意の位置へ配置して呼び出し。sexylightbox.jsの以下を修正してください。sexylightbox.jsの28行目の以下を任意の位置、任意のファイル名に。:’xxx/sexyimages’,2.呼び出し画像のアンカーリンクにクラス指定をします。グループ化したい時は”rel=group”などでそろえればグループ化となります。これだけじゃなくて、映像も使いたい、jQueryのバージョン欲しい方は有料ですが、Sexylightbox2もあります。bPopup.jsデモ&使用方法&ダウンロード使用ライブラリ:jQuery対応形式:画像、iframe,flash一見すると、シンプルなモーダルウインドウですが、このプラグインはページをスクロールしても追尾してくる。ウインドウ表示位置の自由指定ウインドウ表示方法の指定(画面横から出てくる、画面丈夫から出てくる)ウインドウ同士を重ねることができるとにかく動きが滑らかカスタマイズ度が高い多機能タイプのプラグインです。基本的な使い方1.ダウンロードしたjsファイルとjQueryを呼び出します。});</script>上記の使い方はあくまで基本で、細かい指定がまた必要かと思います。それでも、一度使い方を覚えると幅広く使えるタイプだと思います。easing.jsを併せて使えば、さらに幅は広がります。ページ全体で使用するlightBoxたち多機能ではなく、高機能型のlighboxをこのまま紹介。使い方は簡略していきます。ダウンロード使用ライブラリ:jQuery対応形式:画像これもlightbox系プラグインです。画像ギャラリー特化ですが、レスポンシブに対応もしており、使用するためののcssファイル、jsファイルも合計で4KBという超軽量。イラストサイト、写真サイトなど、画像を見せたいサイトで活躍してくれると思います。ダウンロード使用ライブラリ:jQuery対応形式:画像、youtube,vimeoHTML5、CSS3を使用したギャラリー型lightboxプラグイン。スマホのフリック操作にも対応しています。終わりに前回は5つ、今回は4つだけの紹介ですが、lightboxも広さが分かるものを選んでみました。ここまでも十分にすごいんですが、まだまだ進化していくような気もしたりします。それでも、lightboxの本来の「画像を拡大表示させてユーザーへ意識を寄せる」という枠は忘れずに考えることは注意したいところです。見てる人が見やすく、かつ楽しめるlighboxプラグインを見つけるきっかけになればと思います。Blogタケヨシアクトゼロのエンジニアです。RESERVED.ページTOPへ戻る。