画像を拡大表示させるお馴染みの jQuery スクリプト［LightBox］は、その便利さと使いやすさから一気に普及しましたが、今日紹介する［Intense Images］は更なる進化を遂げたスクリプトです。

デスクトップのクリック操作や、スマートフォン、タブレットのタップ操作でも軽快に動作します。
jQuery 不要で、単体で動作し、容量も軽く、わずか「7.8KB」という嬉しさ。

まずはサンプルをどうぞ。

Intense Images：サンプル・デモ

ご覧の通り。
クリックorタップすると画像が全画面表示され、拡大と同時にキャプションも挿入されます。

さらに、画像のサイズに合わせて水平または垂直にスクロール。

この使い勝手を覚えてしまうと、もう［LightBox］には戻れないののではないでしょうか？

スクリプトのダウンロードは以下の本家サイトよりどうぞ。

Intense Images

使い方は以下。

使い方

ダウンロードした［Intense Images］の本体［intense.js］を<body>〜</body>タグの中で読み込みます。

<head>
<script src='intense.js'></script>
</head>

続いて HTML 表記。

［Intense Images］で拡大させる画像には、2種類の配置方法があります。

img 要素を使う場合はサムネイルと拡大時の画像を兼用し、data-image 属性を使う場合は拡大時に専用の高解像度の画像を利用することができます。

<img src="./images/v-01.jpg" />

<!-- または -->

<div class="intense" data-image="./images/v-01.jpg" />

data-image を使用する際は、サムネイルは CSS で背景画像として指定します。
さらに、拡大時のタイトルやキャプションは data 属性で指定します。

<img src="./images/v-02.jpg" data-title="画像のタイトル" data-caption="画像のキャプション"/>

最後に、拡大する要素にclassを与え、querySelectorAllで指定しスクリプトを実行します。

<img src="./images/v-02.jpg" class="intense" />
<img src="./iamges/v093.jpg" class="intense" />

<script>
window.onload = function() {
var elements = document.querySelectorAll( '.intense' );
Intense( elements );
}
</script>

data-imageを使った場合も同じです。

<div class="intense" data-image="./images/v-02.jpg" />
<div class="intense" data-image="./iamges/v-03.jpg" />

<script>
window.onload = function() {
// Intensify all images with the 'intense' classname.
var elements = document.querySelectorAll( '.intense' );
Intense( elements );
}
</script>

Intense Images：サンプル・デモ