端くれプログラマの備忘録 JavaScript [JavaScript] zoomwall.js – ズーム機能付き画像ぎっしりギャラリー

[JavaScript] zoomwall.js – ズーム機能付き画像ぎっしりギャラリー

画像を隙間無く並べて、クリックすると拡大して表示してくれるスクリプト。操作感が気持ちいい。

zoomwall.js (デモ)
http://ericleong.me/zoomwall.js/

ericleong/zoomwall.js
https://github.com/ericleong/zoomwall.js

使い方

// 外部ファイルの読み込み
<link rel="stylesheet" type="text/css" href="zoomwall.css" />
<script type="text/javascript" src="zoomwall.js"></script>

// 画像の追加
<div id="zoomwall" class="zoomwall">
<img src="./images/01_lowres.jpg" data-highres="./images/01_highres.jpg" />
<img src="./images/02_lowres.jpg" data-highres="./images/02_highres.jpg" />
</div>

// 実行
<script>
window.onload = function() {
    zoomwall.create(document.getElementById('gallery'));
};
</script>