reviews

 

軽くてシンプルでカスタマイズしやすいレスポンシブでタッチフレンドリーなライトボックス

• 

• 

• 

• 

ほとんどタイトルで言い切ってしまったのだけども、Image LightboxはデフォルトではCSSは何も指定されていないというシンプルなライトボックス系のjQueryプラグイン。エフェクト開始、画像読み込み、読み込み終了、エフェクト終了、等々コールバックが充実しているので、ウェブデザインや用途に合わせてとてもカスタマイズしやすい作りになっている。ライトボックスが珍しかった時代はともかく、ユーザーがウェブ体験に慣れている現在、余計なUIがない方が扱いやすいのではないかと思う。

簡単な設定

使い方は簡単でまずはjsを読み込みます。

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    jQuery( function($){
        $( 'a' ).imageLightbox();
    });
</script>

次にcssに以下を設定

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

以上です。

が、しかし…

Image Lightboxはie8に対応していないという、ブラウザ島国事情にとってあまりに厳しい条件。なんとかして使いたいと思ったので、以下ではie8対応にする方法を考えることにします。（作者のValutisさんはリトアニアの方のようだけども、レガシーブラウザは死滅しているみたい…めちゃめちゃうらやましい。）

 

ImageLightbox.jsをIE8対応に変更する

やってみたら主な（すべてではない）障害は二つあった。

parseIntで整数値が返ってこない

一つはparseIntの対象となる要素（デフォルトだとimg#imagelightbox）のcssでleftの値がエラーを起こすことで、cssに値を与えれば良いのだが、それだけでは中央揃えも出来ない有様なのでcssハックで中央揃えすることに。

img#imagelightbox { position:fixed; z-index:9999; -ms-touch-action:none; touch-action:none; } /* minimal css */
img#imagelightbox { left:09; right:09; top:09; bottom:09; margin:auto9; } /* IE8 hack */

load functionが発火しない

これで本体に手を付けずに済んだ…と思ったのもつかの間、いったん機嫌良く表示された画像を閉じ、再度リンクを押して表示しようとすると画像が読み込まれないという。これはあれだ。たいへん残念なIEらしい、画像がキャッシュされてしまうとload functionが発火しないという致命的なバグ。139行下のload function手前のjQueryでsrcを付与している処理、これをfunctionから切り離して後述するように変更。

元のコード

image = $( '<img ' + options.selector + ' />' )
.attr( 'src', target.attr( 'href' ) )
.load( function()
{
image.appendTo( 'body' );
setImage();
/////////// 略 ///////////
})
.error( function()
{if( options.onLoadEnd !== false ) options.onLoadEnd();
})

これを次のように変更してやります。

image = $( '<img ' + options.selector + ' />' ).appendTo( 'body' );
image.load( function()
{
setImage();
/////////// 略 ///////////
})
.error( function()
{if( options.onLoadEnd !== false ) options.onLoadEnd();
});
image.attr( 'src', target.attr( 'href' ) );

改変したコードはここにあげときます。（コードを改変したくなければ、ie８の場合のみリンク末尾にjsでタイムスタンプを付ける、という手法でも回避できるのではないかと思います。未検証ですが。）