Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

KsGMap(Google Maps API) + Lightbox

というのを実装してみた。サンプルは自分のサイトに設置しているが、まだコンテンツが不十分で、ネットで公開できないレベルなので、コードだけ説明しておく。ちなみに、IE6、Firefox1.5あたりは確実に動いているが、Opera9やNN7系は若干動きが安定していない。ただ、コードを公開しておくのは、偉い人がもう少しマシなコードを書いてくれるかなという期待もある。


まず、Lightbox JSをダウンロードしてくる。


http://www.huddletogether.com/projects/lightbox/


でも、このままではindex.htmlと一緒のファイルでしか動かないので(画像やCSSファイルが相対パスになっている)、絶対ファイルに書き換えてあげたほうが後々便利かも。


そのへんの詳しい説明は、MovableType備忘録: サムネイルをLightbox JSで表示してみるに詳しく書いてある。で、これでimgにアンカーを指定してやるときに、rel="lightbox"でLightboxが作動するわけ。


次に、Google Maps APIの上にあるinfowindow内の画像をクリックすると、その画像がLightboxで表示されるようにする。このhackは既にほかのサイトで行われており、そのサイトのコードを紹介しておく。

月と六ペソ: Light Box + Google Maps

<a href="ayame02.jpg" rel="lightbox" onclick="showLightbox(this); return false;">菖蒲<br />
<img src="ayame02-thumb.jpg" width="80" height="60" alt=""/><\/a>

クリックしてみれば分かると思うけれど、確かにLightboxで画像が表示される。このコードはGoogle Maps APIのためのJavaScriptのコードは一切手を加えず、Lightboxをonclickするだけで実現している。


次に、KsGMapを持ってくる。「別に、もうGoogle Maps APILightboxできたからいいじゃん」と思うことなかれ。僕はJavaScriptが本当にダメなんです。それで、今回地図情報を扱うために、KsGMapを使わせてもらっているんです。ちなみに、僕が使ったのは、ver1.10β03。


設置などなどの方法はサイト内の情報を色々と参考にしてもらうとして、ここで注意すべき点をいくつか。


まず、Google Maps APIはver2になってから、bodyにonunload="GUnload()"を指定してやることにより、表示スピードを上げているらしい。APIの公式ドキュメントなどを覘くと、そのほかにもonload="load()"などが指定されているけれど、KsGMapはこのへんをJavaScriptのファイル内で処理しているようで、このタグを書いてしまうと動かなくなる。そのため、onunload="GUnload()"だけを一旦指定しておく。


ただ、このままだと、Lightboxは動かない。たぶん、KsGMapsのJavascriptファイルの大体125行目にあるwindow.onload = KsGMapInit;っていうものと、Lightbox.jsの421行目から437行目あたりでも、window.onloadが使われており、それが衝突しているのだと思う。そこで、この二人をうまく回避してやる必要がある。


この方法は実はLightboxの公式のドキュメントにしっかりと記載されている。一番始めのほうで紹介したLightboxのサイトに行き、そのページの下のほうに行くと、「Troubleshooting」というのがあり、その1つ目に、「It doesn't work at all. The image opens up in a new window.」というのがある。その解説文を読んでみると、要はJavaScriptファイル同士で衝突している可能性があるよね、onloadで何か指定していない?ってことだ。


まさしく、今回のこの状況。ページ内には、body onloadという説明になっているが、上記で書いたように、KsGMapのファイル内でもwindow.onloadが使われている。これらを回避してやればよい。これも公式ドキュメント通りにコードを書いてやればよいので、「body onload="KsGMapInit();initLightbox()"」とする。最後に、処理を高速化するコードを後ろにつけてやり、「」とする。


で、これが本当に最後の処理。KsGMapはGoogle Maps APIのデータをXML側から呼び出す指定をしている。デフォルトのファイル名は「sample_simple.xml」。このファイルの上の方に、テンプレートという記述があり、ここをCSSで書き換えることにより、クリックしたときのinfowindowのデザインやコンテンツを書き変えることができる。


そこで、僕が作ったのはこんな感じ。

<div style="padding: 5px; border-bottom: 1px solid #B4CB67; font-size: 80%; font-weight: bold;">写真<br />
<a href="%photo%" rel="lightbox" onclick="showLightbox(this); return false;" style="border: none;">
<img src="%photo%" style="width: 140px; height: 140px; margin: 5px 5px 5px 0;" />
</a>

ここで、やりたいことは、画像をphotoという属性名でXML内に作っておき、それをあらかじめ正方形にサイズを調整しておく。その次に全く一緒のものをimg srcで表示させ、無理やりサイズを正方形サイズに押し込めてしまう。もちろん、a hrefに大きな画像を、img srcにはサムネイルの画像を別々に作っておくという方法もありなのだが、面倒なのでこの方法にした。


a hrefにはrel="lightbox"というお馴染みのものを指定しておく一方で、上のほうで紹介したGoogle Maps APIJavaScriptを回避するためのコード、onclick="showLightbox(this); return false;も指定しておく。また、border: none;というのは、なぜかここにリンクを張ったときに、リンクの下線が出てきてしまうから。もちろん、CSSのコードの記述の仕方によっては、text-decoration: none;にもなるだろう。


これで、KsGMapでもLightboxを使うことができるはずだと思う。長い文章を読んでもらって、ありがとうございます。ぜひとも、フィードバックを期待したいです。