no-image

JavaScript

フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリーを実装することができるjQueryプラグインです。カスタマイズも簡単で、メジャーなブラウザとの互換性もバッチリです。Retinaフレンドリーでもあるので、高品質な画像にこだわりたい人にも最適ですね。

jGallery

デモ

デモでは横幅いっぱいに表示されたダイナミックなスライダーギャラリーが設置されています。画像にマウスオーバーすると、左右に前後移動する矢印アイコンが表示されます。

スライダー下部にはサムネイル画像によるナビゲーションも設置されていて、ここから目的の画像を選択することも可能です。

また、スライダーの左下にはスライドショーの再生ボタンも用意されています。再生ボタンをクリックすると、自動再生機能が有効になります。スライダー画像の下に時間経過のバーが表示され、時間の経過とともに左から右へバーが伸びていき、右端まで伸びると次の画像へスライド移動される仕組みです。

さらに、スライドショーが有効になると、再生ボタンの隣にランダムボタンが現れます。ここをクリックすると画像がランダムで切り替わっていきます。

実装に関しても、50を超えるパラメーターや67のトランジションエフェクトなど、優れたカスタマイズ性を有しています。

フレキシブルでモバイルフレンドリー、そしてダイナミックなフォトギャラリーを実装したいという人は、ぜひ「jGallery」を活用されてみてはいかがでしょうか?

jGallery

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

ステップごとにフォームをバリデーションしてくれる「Multi-Step-Form-Js」次のページMulti-Step-Form-Js

関連記事

  1. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  2. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  3. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  4. Jquery Line Progress Bar
  5. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  6. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

最近の記事

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

アーカイブ

PAGE TOP