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

関連記事

  1. Animate Transition
  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  5. jQuery.fontFlex

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP