Images grid

JavaScript

画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

Images gridは画像のグリッドレイアウトを製作するためのシンプルなjQueryプラグインです。このようなグリッドレイアウトを助けるプラグインは多数紹介されています。それらには、ソート(並べ替え)機能や、ドラッグ機能などを備えるものもあります。今回ご紹介するのは、非常にシンプルで基本的な仕様のプラグインとなります。特に高度な仕様は必要なく、シンプルに画像を表示したい方へおすすめです。

Images grid

デモ

Images gridの特徴は、非常にシンプルであることです。クリック(タップ)により画像が拡大されると、拡大したまますべての写真がスライドで見ることができます。スライドは自動ではなく手動でアルバムのようなイメージです。拡大中はサムネイル画像の表示はありませんが、下部に画像の総数が分かるナビゲーションが表示されます。そちらをクリック(タップ)して表示画像の切り替えをすることも可能です。上部にはキャプションが表示され、画像のタイトルなどの表示が可能です。

デモサイトでは、7枚の写真を使用していますがこれらすべてがグリッドで羅列されているわけではありません。グリッドで最後に表示されている画像の上に「View all 7 images」とテキストが記載されており、すべてで7枚の画像が見られることが分かるような仕様になっています。

以上のような特徴はオプションで変更可能な場合もありますので要チェックです。

本プラグインの導入方法は下記の手順となります。

<script src="src/images-grid.js"></script>
<link rel="stylesheet" href="src/images-grid.css">
<div id="imgs"></div>
<script>
  $('#imgs').imagesGrid({
    images: ['img1.png', ... , 'imgN.png']
  });
</script>
images: [
      'hello.png',
      'preview.jpg',
  {
        src: 'car.png',              // URL
        alt: 'Car',                  // 代替テキスト
        title: 'Car',                // タイトル
        caption: 'Supercar',         // モーダルキャプション
        thumbnail: 'cap-preview.png' // サムネイル画像のURL
      }
]

Images grid

関連記事

  1. CSS3 Menu Slider
  2. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  3. Grasp Mobile Progress Circle
  4. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

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

    JavaScript

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

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

  6. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP