人からちょっとしたホームページ編集を頼まれて、「こんなんでどうですか~」と見せてて、画像を数点表示しているところで。
「これさ、サムネイル画像をクリックしたら、真ん中に大きな画像がポップアップするみたいに、最近よく見かける感じに出来ない?」
と言われた。
Google先生に「JavaScript image popup」とか「jQuery image popup」とか放り込んだらちょうど良いのが見つかった。
- Fancybox
-- http://fancy.klade.lv/
キャプションも付けられるし、ポップアップした時の枠線画像とか閉じる為の「×」画像とかとCSSも用意されているので、サンプルをコピペしてちょこっと直すだけで動く。JavaScriptは、jqueryの最新版のminバージョンも込みで入ってるので、そのまままとめて放り込むだけでOK.
という要素に対して、
$(document).ready(function() {
$("a").fancybox();
});
という感じで適用している。タグに適当なclass属性を割り当てれば、jQueryのselectorで任意のa要素だけに適用できる。
これならJavaScript-OFFの場合でも、サムネイル画像クリックで大きな画像にページ毎遷移するという最低限度の動きは残せる。