フォトギャラリーに使えるzoomwall.jsの使い方

画像の高さを揃えてタイル状に並べて表示してくれ、画像をクリックすると拡大して表示します。

レスポンシブにも対応していて、簡単な記述で実装できます。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリック作者ページのデモは、こちらをクリック

2.ダウンロード

作者ページに行って、ダウンロードしてください。
ダウンロード完了し解凍すると「zoomwall.js-master」フォルダーができます。

3.必要なファイル

フォルダーの中身を自分のフォルダーにコピーします。
zoomwall.css
zoomwall.js

4.CSSの編集

cssは特に作成しなくても良いです。

5.HTMLの編集

headタグ内で、zoomwall.css、jquery.js、zoom wall.jsを読み込み、初期化します。


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

<script>
	window.onload = function() {
		zoomwall.create(document.getElementById('zoomwall'), true);
</script>

</head>

bodyタグ内で、画像を追加していきます。


	<div id="zoomwall" class="zoomwall">
		<img src="./images/thumbs/thumb_y001.jpg" alt="y001" data-highres="./images/y001.jpg" />
		<img src="./images/thumbs/thumb_y002.jpg" alt="y002" data-highres="./images/y002.jpg" />
		<img src="./images/thumbs/thumb_y003.jpg" alt="y003" data-highres="./images/y003.jpg" />
	</div>