Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

レスポンシブなライトボックスを実装できる「flipLightBox」

ひとつ勉強したので、ご紹介。レスポンシブなライトボックスを実装できるjQueryプラグイン。

flipLightBox


ライトボックスという言葉を初めて知った。言葉というか実際のプラグインか。サムネイル画像をクリックすることで、モーダルウィンドウに大きいサイズの画像を表示させる「LightBox」というプラグインが存在している。

Lightbox - Wikipedia


で、今回ご紹介しているプラグインはそのライトボックスの機能&レスポンシブというわけ。確かに「Lightbox」はレスポンシブではない。サムネイルのグリッドレイアウトの再構成だけでなく、モーダル自体も画面幅に合わせてサイズを変えてくれるあたりが親切。

詳しくは書いていないが、IE含むクロスブラウザ対応がされていて、実装も簡単そう。