JavaScriptだけで静止画像のポップアップを拡大縮小する仕掛けを作って、いちおう動作している。
画像読み込み中には処理中アイコンを表示させ、なんとなく実用的な感がする。
また、画像がリンク切れの場合にはNotFound画像を表示するようにした。

これで、当初の目的は果たした事になるが、また余計な気持ちが出てしまった。
CSSのTransitionを使うと、大き目の画像表示がもっと滑らかになるのではないかと。
まぁ、今のところ僕のPC環境ならJavaScriptだけでも気にならないが・・・

初めはCSSかJavaScriptか迷って始めたポップアップだが、CSSは面倒そうなので後回しにした。
後回しというか、CSS版は作らないつもりでいたはず。
詳しくは知らないが、ブラウザによって使えなかったりするのがCSS・・・
JavaScriptなら、あまりブラウザの違いを気にせずに良いかと思って決めたこと。
ーーーーーーーーーー



なんとかCSS版が出来て、JavaScript版と比べたが・・・
あまり変わらないというか、そんな感じである。
ただ、サイズ増減計算などが無い分だけコードが少なくなるかなと。
JavaScript版は、作っているうちにゴチャゴチャして少しイヤな気分になっていた。
あとでスッキリと手直しをすれば良いと思っているが、いつもながらやらないだろう。

CSS版はTransition完了の検出方法に手間取ったが、Ie、Firefox、Chromeで動作確認している。
現在、選択式でどちらでも使えるようにしてある。
もっとも、ブログ閲覧時の選択ではないのでテンプレート修正時にスイッチを切り換える事になる。
どうしようか、ブログにボタンでも付けて切り換えられるようにしようか？
ただし、その場合にはクッキーを使わないと記事やページが変わるたびに初期化されてしまう。
ふぅ～ん、あまり必要性もないし・・・

ま、暇があったら