[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images

Post on:2014年7月8日

デスクトップのクリック操作、スマフォ・タブレットのタップ操作でも快適に、画像を拡大表示させる超軽量（7.8KB）のスクリプトを紹介します。
jQueryなど他のスクリプトは不要で、単体で動作します。

サイトのキャプチャ

Intense Images
Intense Images -GitHub

Intense Imagesのデモ

デモはデスクトップ、スマフォ、タブレットなどのブラウザでご覧ください。

デモのキャプチャ

3つのサムネイルがあり、それぞれをクリック・タップするとブラウザいっぱいに画像を表示します。

デモのキャプチャ

右端のヒツジを拡大表示

拡大時には、タイトルやキャプションを加えることもできます。

画像は実は横長で、拡大時にスクロール・スワイプして全部を表示することができます。

デモのキャプチャ

ヒツジの画像はこんな感じの横長

横長の水平スクロールだけでなく、縦長の垂直スクロールにも対応しています。

デモのキャプチャ

サムネイル真ん中の風景写真は縦長

Intense Imagesの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。
※jQueryなど他のスクリプトは必要ありません。

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

Step 2: HTML

画像は2種類の配置方法があります。
img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。

<img src="./img/awesome-source.jpg" />

<!-- OR -->

<div class="anything" data-image="./img/awesome-source.jpg" />

data-imageを使用する時は、サムネイルはCSSで背景画像として指定します。

画像の拡大時のタイトルやキャプションはdata属性を使用します。

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

Step 3: JavaScript

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

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

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

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

<div class="intense" data-image="./img/awesome-source.jpg" />
<div class="intense" data-image="./img/awesome-source.jpg" />

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

sponsors

top of page

©2024 coliss