写真のかっこいい表示 LightBox2
写真地図ブラウザで写真をどう表示するか。なかなか難しい。そこでとりあえずlightbox.jsという写真表示のjavascsript libraryを使ってみた。
特徴は
-
表示方法がカッコ良い。
実装方法もカッコ良い。しっかりしている。
表示方法が工夫されているので、画像データのロード時間が気にならない。
というか、急いで見たい気が薄れる。 さらに写真セットとすると、プリロードしてくれて、2枚目以降が表示が速い。
ホームページはLightBox2 by Lokesh Dhakar。
- 1.必要なもののダウンロード
- LightBox2の ダウンロードページより lightbox2.03.3.zipをダウンロード/解凍。
- 2.画像ファイルの場所の指定
- lightbox.jsとlightbox.cssに画像ファイルの場所が指定されているので、アップロード
する場所を考えて修正。今回は全てhttp://genisgen.googlepages.com/直下にアップロード
するので（googlepagesにはfolderを作成できず、直下にしかアップロードできない）、
例えばlightbox.jsの65行目の
"images/loading.gif"を"http://genisgen.googlepages.com/loading.gif"に修正。 lightbox.jsの66行目、lightbox.cssの47行目52行目53行目も同様に修正。 - 3.必要なもののアップロード
- effects.js, prev.gif, next.gif, loading.gif, close.gif, lightbox.css, lightbox.js, blank.gif, closelabel.gif
- 4.リンクの設定
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />を<head>タグ内に挿入。
bloggerの場合だと、テンプレート>HTMLの編集より。
ちなみに、scriptaculousのフルパッケージは script.aculo.us/downloads よりダウンロード可。
これで準備は完了。あとは、以下のように書けば使用可能。
<script type="text/javascript"
src="http://genisgen.googlepages.com/prototype.js>
</script>
<script type="text/javascript"
src="http://genisgen.googlepages.com/scriptaculous.js?load=effects">
</script>
<script type="text/javascript"
src="http://genisgen.googlepages.com/lightbox.js">
</script>
<a href="http://farm2.static.flickr.com/1001/527593023_6ff2e308bd.jpg"
rel="lightbox">image #1</a>
実行例：
写真セットの実行例：
問題:
ただし問題は、表示される写真にリンクを付与できないこと。表示される写真をクリックしたら、その写真のブログページに飛ぶようにしたい。まぁ、これはlightbox.jsをハックするしかないんだろう。それほど難しくはないような気がする。
と思ったけど、こんなニーズは他にも沢山あるような気がしてlightboxのホームページを見直したら、対応方法が書いてあった。危ない、危ない。いつも部下に言っている『他の人も欲しがりそうなことは、転がっているはずと考えろ』を忘れていた。恥ずかしい。
<a href="images/image-4.jpg" rel="lightbox"
title="<a href="link.html">my link</a>">
Image
</a>
リンクの実行例：
javascriptの関数からの実行
Google Mapsで使うことを考えると、javascriptの関数から表示できるようにしなければならない。<a>オブジェクトのメソッドで出来そう。ということで
Microsoft Developer NetworkのHTML and DHTML Referenceに。Objects>a>Methodsでclick()を発見。このサイトは助かる。サンプルプログラムもあるし。
だけどFirefoxではダメだって。mozilla developer centerのDOM:element.clickに書いてある。
ここでまたまた暴走。Firefoxでどうすれば良いか必死に探しちゃった。難しそうと分かって初めて気付いた。他の人も困っているはず。Lightbox forumにあたったら直ぐあった。
答えはmyLightbox.start(クリックしたいaオブジェクト)という関数を使うこと。
javascriptからの実行例：
0 件のコメント:
コメントを投稿