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. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  2. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  3. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  4. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  5. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  6. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP