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

parallax-background.jsパララックス効果で視差の背景を演出してくれる「parallax-background.js」前のページ

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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  2. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  3. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  4. socialShare.js
  5. Select.js

    JavaScript

    セレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」

    Select.jsはセレクトボックスをシンプルでオシャレにスタイリング…

  6. jQuery Hero Slider Plugin

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP