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. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  3. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  4. gridscrolling.js
  5. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  6. jQuery Hero Slider Plugin

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP