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. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  2. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  3. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  4. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  6. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP