a2tk

Simple lightboxはWP用のプラグインなどもあるAndré Rinas氏が開発したものと、DAMIR BREKALO氏が開発した2種類があります。たまたま名前が被ったのかは分かりませんが、別のプラグインです。どちらもシンプルながら洗練されたデザインでレスポンシブにも対応しています。

André Rinas氏の方はタッチ操作にも対応したアクセシビリティにも優れた良いプラグインで、当サイトでも使用しておりました。ただ、画像をオーバーレイ表示した際にURLにアンカー（#pid）が付いてしまい、ブラウザの戻るを何度も押さないと前のページへ戻れない現象が起きてました。仕様なのでバクとかではありませんが、オプションにもURL書き換えの変更が用意されていなかったので、今回はもうひとつのSimple lightboxに入れ替えてみました。

今回の記事で取り上げているDAMIR BREKALO氏開発の方は、タッチ操作には対応せず機能も最小限ですが、動作や容量が非常に軽量でこちらも良い感じです。しかし、導入時の状態ではクローズボタンが文字化けしてしまったので、ソースコードの修正部分を載せておきます。

SimpleLightbox by André Rinas SimpleLightbox by DAMIR BREKALO

文字化け部分を実体参照へ

'<button type="button" title="' + o.closeBtnCaption + '" class="slbCloseBtn ' + o.closeBtnClass + '">×</button>' +

simpleLightbox.jsの338行目にクローズボタンのHTMLが書かれています。

「×」がそのまま書かれてるのが原因ですので、実体参照「×」に置き換えれば直ります。

'<button type="button" title="' + o.closeBtnCaption + '" class="slbCloseBtn ' + o.closeBtnClass + '">&times;</button>' +

DAMIR BREKALO氏のSimple lightbox表示サンプル

$('.imageGallery1 a').simpleLightbox();

jsとcssファイルを入れた後は適用させたい画像のaタグを指定するだけなので導入も簡単です。