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. How satisfied are you? Slider
  2. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  3. Rainbow.js
  4. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  5. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  6. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP