no-image

JavaScript

多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」

frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレンドリーなLightboxを実装することができるjQueryプラグインです。画像を単体で拡大表示できるほか、複数の画像をグループにしたギャラリー表示もできます。

frydBox

デモ

上記は単体画像のタイプのデモです。サムネイル画像をクリックすると、画像がLightbox風に拡大して表示されます。背景にはオーバーレイがかかるので、ユーザーも画像に集中して楽しむことができます。画像の外側をクリックすると、元の状態に戻ります。

うっすらとフェードで表示されるさりげないアニメーションも素敵ですね。

デモ(グループ)

先ほどと同じようにサムネイル画像をクリックすると、拡大された画像が表示されます。画像には矢印アイコンなどの表示はありませんが、画像内の右側をクリックすると次の画像へ、左側をクリックすると前の画像にスライド移動します。

そのほか、キーボードの左右矢印キーでも操作することが可能です。

マークアップもスッキリ記述できてとても実装しやすいのがいいですね。さらに、オプションによる多彩なパラメーター設定ができるのも魅力です。

主なオプションは、prefix、lazyLoading、lazyLoadingDelay、fadeDuration、moveDuration、screenPercent、backOpacity、shadowOpacity、shadowSize、borderSize、borderColor、borderRadius、scrollBarsです。

フェードのデュレーションやシャドウのサイズ・不透明度、ボーダーサイズやボーダーカラーなど、Lightboxの動作からデザインまで細かくカスタマイズすることができます。

レスポンシブにもなっているので、いろんなデバイスでLightboxを楽しめるのがいいですね。

frydBox

Frappe ChartsシンプルでモダンなSVGチャートを実装できる「Frappe Charts」前のページ

Vanilla JSを使った多彩なカスタマイズができるスライダー実装「Tiny slider」次のページTiny slider

最近の記事

  1. クリスマスブレンド エスプレッソロースト
  2. CIO Mate Magnet Stand
  3. 抹茶クリームドーナツ
  4. FAST
PAGE TOP