Images gridは画像のグリッドレイアウトを製作するためのシンプルなjQueryプラグインです。このようなグリッドレイアウトを助けるプラグインは多数紹介されています。それらには、ソート（並べ替え）機能や、ドラッグ機能などを備えるものもあります。今回ご紹介するのは、非常にシンプルで基本的な仕様のプラグインとなります。特に高度な仕様は必要なく、シンプルに画像を表示したい方へおすすめです。
Images grid
Images gridの実際のデモページは以下になります。
Images gridの特徴は、非常にシンプルであることです。クリック（タップ）により画像が拡大されると、拡大したまますべての写真がスライドで見ることができます。スライドは自動ではなく手動でアルバムのようなイメージです。拡大中はサムネイル画像の表示はありませんが、下部に画像の総数が分かるナビゲーションが表示されます。そちらをクリック（タップ）して表示画像の切り替えをすることも可能です。上部にはキャプションが表示され、画像のタイトルなどの表示が可能です。
デモサイトでは、７枚の写真を使用していますがこれらすべてがグリッドで羅列されているわけではありません。グリッドで最後に表示されている画像の上に「View all 7 images」とテキストが記載されており、すべてで７枚の画像が見られることが分かるような仕様になっています。
以上のような特徴はオプションで変更可能な場合もありますので要チェックです。
本プラグインの導入方法は下記の手順となります。
・プラグインをHTMLページに追加
<script src="src/images-grid.js"></script> <link rel="stylesheet" href="src/images-grid.css">
<div>要素で画像を囲み指示を出す
<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のダウンロードや詳しい使い方は以下からどうぞ。
