日記/2009/03/21/サムネイル画像をクリックすると大きい画像がポップアップするJavaScriptライブラリ

人からちょっとしたホームページ編集を頼まれて、「こんなんでどうですか～」と見せてて、画像を数点表示しているところで。
「これさ、サムネイル画像をクリックしたら、真ん中に大きな画像がポップアップするみたいに、最近よく見かける感じに出来ない？」
と言われた。

Google先生に「JavaScript image popup」とか「jQuery image popup」とか放り込んだらちょうど良いのが見つかった。

• Fancybox
  • http://fancy.klade.lv/

キャプションも付けられるし、ポップアップした時の枠線画像とか閉じる為の「×」画像とかとCSSも用意されているので、サンプルをコピペしてちょこっと直すだけで動く。JavaScriptは、jqueryの最新版のminバージョンも込みで入ってるので、そのまままとめて放り込むだけでOK.

<a href="(大きいサイズの画像URL)"><img src="(サムネイル画像のURL)" /></a>

という要素に対して、

$(document).ready(function() {
    $("a").fancybox();
});

という感じで適用している。<a>タグに適当なclass属性を割り当てれば、jQueryのselectorで任意のa要素だけに適用できる。
これならJavaScript-OFFの場合でも、サムネイル画像クリックで大きな画像にページ毎遷移するという最低限度の動きは残せる。