Bootstrap Photo Gallery jQuery plugin

JavaScript

レスポンシブ対応の整列されたフォトギャラリー「Bootstrap Photo Gallery jQuery plugin」

Bootstrap Photo Galleryはフォトギャラリーを作成するのに最適なjQueryプラグインです。このプラグインひとつで画像がグリッド形式で表示され、画像の拡大や次の画像へのスライドが可能です。また画像はさまざまなサイズに対応可能で、同じサイズを準備する必要はありません。レシポンシブにも対応しており、スマートフォンサイトでも快適に見ることができます。jQueryは1.10以上が必要です。

Bootstrap Photo Gallery

デモ

Bootstrap Photo Galleryの最大の特徴は、HTMLの構築がとても簡単であるということです。ul要素を用い、それぞれの項目(画像)をli要素で示すだけで完成します。JavaScriptの記述も新たに行う必要はないため、とても簡単な作業で設置できます。

画像サイズは問いません。クリックして拡大したときに表示可能領域に合わせて画像が表示されます。そのままの状態で、前後の画像をスライドして見ることもできます。

また、画像へのキャプションがつけられることも嬉しい機能です。キャプションは全文を表示できます。グリッド表示のときにのみの表示で、拡大時には表示されませんが、画像に関する情報をしっかりと掲載できるので、とても便利な機能です。

レシポンシブに対応しているので、スマートフォンサイトでは縦1列に画像が表示されるイメージです。画像をタップすると画面いっぱいに画像が広がります。また、ピンチイン・ピンチアウトの影響も受ける設計なので、より大きく画像を拡大して見ることができます。

このプラグインはフォトライブラリーとしての利用のほか、さまざまなコンテンツに利用できると思います。例えば、リンク(a要素)をli要素につけて、リンク先への移動とういうバナーとしての機能にも活用できます。

Bootstrap Photo Gallery jQuery plugin

関連記事

  1. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  2. Responsive Parallax Drag-slider With Transparent Letters
  3. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  4. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  5. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  6. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP