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. Inspiration for Grid Loading Animations
  2. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  3. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  4. circleChart

    JavaScript

    多彩なカスタマイズができる円形チャート「circleChart」

    circleChartは多彩なカスタマイズを実現した円形チャートを実装…

  5. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  6. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP