画像のポップアップをひとつに

先日の『料理の写真（失敗・成功・修正）』という記事では複数の画像がポップアップウィンドウで開くようにしています。「画像の挿入」を使うときに画像オプションで「ポップアップウィンドウ」というのを選択しています。下の画像がそれです。

通常は小さめのサムネイルと呼ばれる画像を表示しておき、その画像をクリックすることでポップアップウィンドウにフルサイズの画像を表示させるという便利な機能ですが、サムネイルをクリックする度にポップアップウィンドウが開いてしまい、いつの間にかポップアップウィンドウだらけという状態になることがよくあります。

画像を大きくして見せたい時に便利な機能なのですが、ポップアップウィンドウだらけになるのは後片づけが面倒になってしまうので、同一記事のポップアップ画像はグループ化してひとつのポップアップウィンドウしか開かないようにしようということです。

まずは下の枠内を見てください。これがポップアップウィンドウで画像を開くように設定したときの内容です。意味不明の文字列がたくさんありますが修正するのは一部だけですから簡単です。

<a href="http://sea.moe-nifty.com/.shared/image.html?/kaiyu/images/sample/katu_1.jpg" onclick="window.open(this.href, '_blank', 'width=640,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="写真１" title="写真１" src="http://sea.moe-nifty.com/kaiyu/images/sample/katu_1_s.jpg" width="200" height="150" border="0" style="float: left; margin: 0px 5px 0px 0px;" /></a>【写真１】 極端な露出不足でなにを写したのかよくわからないですね。ここまでの失敗はあまりないと思いますが、黒焦げの料理みたいでとても食べられる感じはしませんね。（画像クリックで拡大）

やたら長い呪文のような文字列に慣れないと戸惑うのですが、大切なのは下の枠内だけです。ここさえわかっていれば大丈夫ですから安心してください。内容はポップアップウィンドウをどのような状態で開きなさいという細かな設定が書いてあるだけです。

onclick="window.open(this.href, '_blank', 'width=640,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0')

さらに省略してポップアップウィンドウをグループ化してひとつにまとめるには、下の枠内の部分だけに注目してください。これは新規のウィンドウで開きなさいということを意味しています。こう書いてあればサムネイルをクリックする度にどんどん新規のウィンドウに画像が表示され画面上が散らかってしまうわけです。

'_blank'

今回はこれを下の枠内のように変更してみます。複数の画像の該当部分を下のように置き換えるだけです。今回は料理の写真のサンプルということもあり「sample」にしてみました。

'sample'

複数のポップアップ画像の該当部分を同じ文字（今回は「sample」）に置き換えるだけで、同じ文字を持つ画像はグループ化され同じポップアップウィンドウに表示されいくつものポップアップウィンドウで散らかってしまうのが防げるのです。

ちなみに『ドコモの新ロゴ実は5色！？』というおバカな記事でも同じことをしていて、こちらは「docomo」という文字列にしています。

ここでお気付きの方もいらっしゃると思いますが、「sample」と「docomo」と文字が違っていると実は別のポップアップウィンドウで開いてしまうのです。もちろん別のグループだから別のポップアップウィンドウで開いていいのでそうしているのですが、とにかくひとつのポップアップウィンドウで開いて欲しいという場合は「photo」といった文字で全て統一すると良いのではないでしょうか。

最後にひとつだけ注意点ですが、同じグループにしたい画像は同じサイズに統一しておくということです。「sample」にした画像は「640×480 pixel」で統一し、「docomo」にした画像は「500×120 pixel」に統一しています。