軽量でレスポンシブ対応のギャラリー用プラグイン「knack.js」を紹介したいと思います。このjqueryプラグインはスライドショーとしても使用できますし、サムネイルを一覧表示することもできます。またフルスクリーンにも対応しています。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「knack-gh-pages」フォルダーができます。

3.必要なファイル

以下のファイルをそれぞれ自分のフォルダーにコピーします。knack.cssとspritesheet.pngは同じフォルダーにコピーします。当方はcssフォルダーとjsフォルダーを作成して保存しています。 knack.js knack.css spritesheet.png

4.HTMLの編集

headタグ内で、knack.css、jquery.js、knack.jsを読み込み、プラグインの初期化をします。表示する画像ファイルもここで登録します。配列に画像のパスと、説明用のテキストを登録します。 jsセレクタは「projector」に固定されます。他の名前にするとフルスクリーンとかができなくなります。 


<link rel="stylesheet" href="./css/knack.css" media="all" type="text/css" />
<script src="./js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="./js/knack.js" type="text/javascript"></script>

<script>
$(window).load(function(){
	var images = [
		["./images/sample01.jpg","月夜の猫"],
		["./images/sample02.jpg"],
		["./images/sample03.jpg"],
		["./images/sample04.jpg"],
		["./images/sample05.jpg"],
		["./images/sample06.jpg"]
	];
	$("#projector").knack(
		{
			data: images,
			'autoPlay': 4000,
		}
	);
});
</script>
</head>
<body>
	<div id="wrapper">
		<div id="projector"></div>
	</div>
</body>

5.CSSの編集

サムネイルの画像がデフォルトでは小さかったので、30%と大きくしました。 


#wrapper {
	width: 70%;
	padding: 10px;
	margin: 0 auto;
}
.embed-container .thumbs-area .thumbs-box .thumb-image {
	width: 30%;
	height: auto;
}

6.最後に

このプラグインは作りから見ると、ページ全体でギャラリーにするよりもページの一部をギャラリーにするのに使用した方が良いと思います。 画像の下にメニューが表示されます。左の▶︎アイコンをクリックすると再生が始まり、画像が切り替わります。最後の画像で自動的に停止します。右側にはサムネイル表示とスクリーン切り替えアイコンがあります。