frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレンドリーなLightboxを実装することができるjQueryプラグインです。画像を単体で拡大表示できるほか、複数の画像をグループにしたギャラリー表示もできます。
frydBox
以下、frydBoxの実際のデモページになります。
上記は単体画像のタイプのデモです。サムネイル画像をクリックすると、画像がLightbox風に拡大して表示されます。背景にはオーバーレイがかかるので、ユーザーも画像に集中して楽しむことができます。画像の外側をクリックすると、元の状態に戻ります。
うっすらとフェードで表示されるさりげないアニメーションも素敵ですね。
また、以下ではグループによるデモ動作もチェックできます。
先ほどと同じようにサムネイル画像をクリックすると、拡大された画像が表示されます。画像には矢印アイコンなどの表示はありませんが、画像内の右側をクリックすると次の画像へ、左側をクリックすると前の画像にスライド移動します。
そのほか、キーボードの左右矢印キーでも操作することが可能です。
マークアップもスッキリ記述できてとても実装しやすいのがいいですね。さらに、オプションによる多彩なパラメーター設定ができるのも魅力です。
主なオプションは、prefix、lazyLoading、lazyLoadingDelay、fadeDuration、moveDuration、screenPercent、backOpacity、shadowOpacity、shadowSize、borderSize、borderColor、borderRadius、scrollBarsです。
フェードのデュレーションやシャドウのサイズ・不透明度、ボーダーサイズやボーダーカラーなど、Lightboxの動作からデザインまで細かくカスタマイズすることができます。
レスポンシブにもなっているので、いろんなデバイスでLightboxを楽しめるのがいいですね。
というわけで、多彩なパラメーターでモバイルフレンドリーなLightboxを実装できる「frydBox」の紹介でした。frydBoxのライセンスはMITになります。詳細、ダウンロードは以下のページからどうぞ。
