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. ShowMore.js

    JavaScript

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

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

  2. jQuery Hero Slider Plugin
  3. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  4. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  5. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  6. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

最近の記事

  1. 200-DGCAM019
  2. ハクバ GW-PRO RED フォトグローブプロ PL
  3. Soundcore Liberty Air 2
  4. Soundcore Liberty 2
  5. マザーツリー

アーカイブ

PAGE TOP