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

bringinsコンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」前のページ

サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」次のページxGallerify

関連記事

  1. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  2. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  3. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  4. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

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

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP