スマホサイトに簡単に実装できる画像ギャラリー系jQueryプラグイン IMAGE LIGHTBOX

今までPCサイトに画像ギャラリー系（Lightbox系）のjQueryにcolorboxをよく使ってたのですが、スマートフォンでの表示に動作があんまりな感じだったのでスマートフォンサイト向けのjQueryのプラグインを探してみました。

IMAGE LIGHTBOX デモページ

・Image Lightbox: Responsive and Touch-Friendly demo by Osvaldas Valutis

IMAGE LIGHTBOX 解説ページ（英語）

・Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis

内容をみていくと、圧縮版なら4KBと軽量。スマートフォンサイトは軽さが命なので重要です。

IMAGE LIGHTBOX 実装方法

これがなかなか簡単に実装できます。

CSS

以下のスタイルをCSSファイルに記述します。これが画像を拡大表示した時につくスタイルです。

#imagelightbox {
    position: fixed;
    z-index: 9999;
    -ms-touch-action: none;
    touch-action: none;
}

デモページのように影を付けたいのであれば、

#imagelightbox {
    position: fixed;
    z-index: 9999;
    -ms-touch-action: none;
    touch-action: none;
    box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
}

とbox-shadowの記述も追加しておきます。

JS

まずjsをダウンロードします。

解説ページ中段の「JavaScript」に普通版(imagelightbox.js)と圧縮版(imagelightbox.min.js)があるので今回は圧縮版をダウンロード。リンク先を開いてコピペして、imagelightbox.min.jsのファイル名で保存します。

実装するソースは以下のとおり。HTML内に記述します。

<script src="jquery.js"></script>/* jqueryを読み込みます */
<script src="imagelightbox.min.js"></script>
<script>
$( function(){
    $( 'a' ).imageLightbox();
});
</script>

jqueryのバージョンはとりあえず1.7.1で動きました。
「a」の部分は以下、imgタグ内に記述する「data-imagelightbox」の内容と同じであればOKです。

html

<a href="image_01_large.jpg" data-imagelightbox="a"><img src="image_01_small.jpg" /></a>
<a href="image_02_large.jpg" data-imagelightbox="a"><img src="image_02_small.jpg" /></a>
<a href="image_03_large.jpg" data-imagelightbox="a"><img src="image_03_small.jpg" /></a>

これで完成。簡単！

他にもid名の変更やアニメーションの速度などオプションで変更できるのでいろいろ試してみると良いかもしれません。（解説ページ内に記述されています）

スマートフォンでの動作は、

・左右に画像をスワイプすると画像送り
・拡大を解除したいときは、拡大画像以外の部分をタップ
・画像長押しで画像の保存も可能

といった感じでさくさく動きます。Androidでもちゃんと動きました。

今回はスマートフォンサイトのみに実装しましたが、レスポンシブにPCサイトにも対応のようです。

ケンジントン 【正規品・5年保証付き 】 ExpertMouse(OpticalBlack)(USB/PS2) 64325