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

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  2. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  3. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  4. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  5. jfMagnify
  6. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP