ポップアップを作り使っているが、ポップアップを閉じるのにボタン押しがチョイ面倒に感じた。
左上端にある小さなボタンをめがけて、マウスを動かすのが億劫というか。
さっき、朝ごはんを食べながらふと思いついた。
ありきたりであるが、ポップアップの何処でもダブルクリックで閉じるようにするかぁ。

こんなのは、ちょちょいのちょい・・・
コードを一行追加して、あっという間に出来上がり。



ポップアップ上でダブルクリックすれば、ただちにポップアップが小さくなって消える。
これで良いだろうと思うが、どうせ他にダブルクリックの使い道がなさそうだし。
また、これで様子見してみようか。

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

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

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



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

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

ま、暇があったら

もう、これで良いだろうと思っていた静止画像のポップアップだが。
ちょっと気になるところがあり、引き続き暇つぶしのタネに。

とりあえず問題点としてみたが・・・
一つは、画像がポップアップ表示されるまで、読み込み時間を要する場合に無反応というか。
時により僅かの間、画像表示まで待たされる事がある。
この時にクリック後の反応を明らかにしないと、クリック操作が上手くいったのか心配になる。
その解決策として、クリックが正しかった証に処理中を示すアイコンを表示するようにした。

二つ目は。画像クリックで表示されるべきリンク先の画像が無い場合である。
これも無反応でやり過ごしていたが、やはり気持ちの好い事ではない。
解決策は、表示する画像が無い旨のコメント画像を表示するようにした。
ただし、使い勝手から考えるとイマイチどうかなと思える・・・

このあたりの考え方、けっこう難しいのだ。
手間が掛からないのは、ただ単に無視する事である。
しかし、この場合にはポップアップ画像表示が出ない理由が分からない。

しかたなしにエラー表示を出すと、そのエラー表示を消す手間が掛かるようになる。
エラー表示を数秒で自動消去する方法もあるが、それもイラつく。
でも、そこそこの仕掛けかなと思う・・・

とりあえず、今はエラー表示を出して閉じるボタンで消去する事にしている。
また間を見て、自動消去の事も試してみたいと思っている。
ポップアップはモードレスなので背面操作が出来るので、それほど不自由はしないと思う。
それに、リンク切れになる恐れの画像を直リンクなどで使う気にならないので・・・
めったに起こらない事だから、それほど悩む事はないだろうと判断した。
ーーーーーーーーーー

テスト画像を並べる。
まずは、リンク無しの画像


次は原画へのリンクが付いた画像


続いて、これは原画が存在しないリンク切れ状態の画像


画像をクリックした時に処理中のアイコン表示をするが、たいがいは一瞬の事だと思う。
パソコンやネットが重いとか、そういった時にしか長く見られない・・・
今日は、ここまでで終わりにする。

昨日だったかな、静止画ポップアップの改良版をブログに実装した。
画像をクリックすると、拡大画像が少しずつ拡大する仕組み。
僕のPCで見るとIEとChromeに比べて、Firefoxは少し動作が遅いようである。
そのあたりは時間設定で調節が可能なので、しばらく様子見をしている。

他に問題は、ダブルクリックのような事になると画像が二つ表示される事がある。
これはタイミングが悪いと発生するようだが、そのうち解決策を考えたい。
たんにダブルクリックをしても発生はしないので、そう困らないが問題ではある。

とりあえず、画像がスーッと拡大してポップアップ表示され。
そしてポップアップをマウスで移動できるので、ポップアップに隠れた部分も見られる。
その時にポップアップ背面の画面操作も出来るので、モーダルよりも使いやすいと思う。

いちおう、今回はこれまでやって終わり。
ーーーーーーーーーー

今朝は昨日ほど寒くはなかったので、外は霜で白くなっていなかった。
それでもゴミ出しに出歩くと、寒い事には違いないと実感する。

何がどうという事はないのだが、体調が良くなかったのでゴミ出し後は昼まで寝ていた。
午後はスーパーへ買い物に行って、いつもの食料品を買って来た。
鶏肉とネギを串に刺して焼き鳥にして、酒を飲みながら食べた。
さすがに真冬の庭では厳しいので、魚を焼く電気ロースターで焼いた。
けっこう、上手く焼けたので満足している。

他に使っているオーブントースターは、温度が上がると加熱が切れるので良くない。
餅を焼いても焦げが出来なくて、イマイチ仕上がりに不満であった。
さて、そろそろ晩ごはんの支度をしよう。

スライドショーを作ったが、どうもよく分からない。
画像を徐々に表示・消去する設定がCSSなのだが、初めて扱うので理解できていない。
いろいろ調べて、上手く使えるようにがんばろう。

他の部分は、ごく普通のプログラムなので割合と簡単に作る事が出来た。
僕の考えた仕組みは・・・

htmlにスライドショー用の div を書き、その中に img タグで複数のスライド画像パスを書く。
そして、最後のimgタグにクラス名 class = "yuzSlide" を割り当てる。
これで画像のセットは終わり、簡単である。

JavaScriptコード内に画像パスを書く方式だと、操作ミスでコードを損なう恐れがある。
htmlに画像パスを書くなら、それほど危なくないと考えたのだ。

class="yuzSlide" を使う理由は、JavaScriptを無効にして表示した時の対応策。
このクラスにCSSで position: relative !important; を設定してある。
これでJavaScriptが無効な時に、画像がダダ並びで表示されるのを防げる。
ーーーーーーーーーー

プログラムの動作は次のようになっている。
htmlのスライドショー用 div に書かれたimgの画像パスを、プログラムで一つずつ拾い出す。
拾い出した画像パスを配列に格納し、その後で当該imgタグエレメントを削除する。
最後は、スライドショー用 div の中は空っぽになる。

次に、空になったスライドショー用 div 内に、新たな img エレメントを二つ作る。
この二つの img に、初めに拾った画像パスを順次入れる。

その後二つの img に表示・非表示のクラス名を与えて、CSSでフェードイン・アウトをさせる。
フェードアウトした img には、配列に格納した次の画像パスをセットして、クラス名を表示に変更する。

この画像とクラス名の入れ替えを無限に繰り返す・・・
ーーーーーーーーーー

いろいろ考えて、なかなか解決しなかったところがある。
フェードイン・アウトはもちろん論外なのだが・・・

【注 1 ーーー
スライドのimgにstyleの!importantを強制してあり、後からJabvaScriptで再設定を試みたがダメだった。
いや、結果はなんとかなったのだが、それまでが大変であった
.style.cssText = "position: relative !important;"
幾つかの方法を試して、やっと上記の方法で上手く動作した。
これ、あたり前のやり方だったのだろうか？
ともかく、なんとかなったので後日のために書いておく。
.style.position = "absolute" とか、普通にいけそうだと思ったのだがダメだった。ーーー】

他にはループの事がある。
どうやって繰り返しをしたら良いのか・・・
これはsetTimeoutでなんとかなった。
まぁ、とりあえず試験運用で動かしているのだが。

追記：2016/01/11
【注 1】の事について、勘違いをして余計な事をしていた。
スタイル設定方法は.style.cssTextにすると良いというのは本当の事で、それだけは収穫だった。
だが、その前にすっかり混乱してしまい、何故かrelativeが必要だと思い込んでしまった。
どう考えても変だとは思っていたが・・・

混乱の原因はいろいろあるが、スライドショーを表示する部分の親エレメントにスライド画像と同じ背景を設定してあった事に気付かなかった。
これは以前に使っていたスライドショーを設置する時に、試験的に背景に使っていたもの。
それをすっかり忘れていたので、なんでこの一つの画像だけが定位置になり他の画像が？？？
こういった現象に悩まされ、訳が分からなくなっていた。

スライドショーのコードを別に作ってテストして、上手く動いたのでブログに実装したのに。
いざブログでは思い通りにならない、とか・・・
まぁ、いろいろあったわけで。

どうもCSSが絡むと苦手意識があるためか、疑心暗鬼になって余計な事をしてしまう。
たっく、とんだ回り道をしてしまった。

なんとか、スライドショーが出来上がった。
と、思うが不具合があっても知らない・・・

JavaScript、CSS、HTMLの三つの変更が必要だが、まぁしかたないか・・・
初めにJavaScriptとCSS部分を追加してしまえば、後でいじくる必要はない。
画像の入れ替えも、HTMLで画像リンクを書けば簡単に出来る。

ところで、いろいろやっている途中で動作確認が上手く出来ない事があった。
おかしい、このようになるとは・・・

テスト用のブログを、このブログとそっくりに作ってあるのだが。
これまで幾度かのテストを繰り返しているうちに、この本家ブログと異なる部分が生じていた。
そのために、思わぬ結果になって混乱してしまった。

そもそも、この本家ブログのテンプレートHTMLとCSSをコピーしてテスト用ブログに貼り付けたのが原因だ。
つい先日、ポップアップのプログラムが完成した時の事である。
面倒くさいと思い、テスト用ブログにそのままコピペしてしまった。

今はテスト用も修正が済んだので、これからは気をつけようと思う。
もっとも、じきに忘れて同じ事の繰り返しになりそうな気もするのだが・・・
ーーーーーーーーーー

今日はクジラの刺身を買って、夕方から酒を飲んでいた。
そのうち眠くなって・・・
少し飲み過ぎたようで、なんとなく気分がすぐれない。
おでんと握り鮨も食べたので、お腹がいっぱい。

なんだか、生あくびばかり出ている。
もう、寝よう。
ーーーーーーーーーー

追記：15分後の話

寝る前にブログのソースを見て、おかしな事に気付いた。
CSSのコメントに、//を使っていた・・・
これでも問題は出ていなかったのだが、削除しておいた。

ともかく、これで jQuery から離れられたのでスッキリした気分だ。
あとで jQuery を利用する事があるかも知れないが、今は余計な物が無くなってホッとしている。