前回のブログの追記でちょこっと書きましたが、先週末に会社の同期のメンバーと共に、箱根へ 1泊旅行に行ってきました。

というわけで、その時の写真をご紹介。・・・といって単に写真を並べるのも芸がないなと思い、 Javascriptで簡単なスライドショーのようなものを作ってみました。↓こちらです。

Hakone Tour (2006.03.18～19) - Photo Shows

 

なんとなく旅の途中で思いつき、帰りの道中で画面イメージとか考えて（コラ）、 帰宅したその日のウチに作ってしまいました。（多分、次の日になるとやる気なくなるから。）

なるべく汎用的、かつ手軽に使える（配列とかにファイル名並べたりするのはイヤだったので。 仲間内用の写真は130枚もあったし...）ものということで、以下のような仕様にしてみました。

• 画像は「<プレフィックス>＋<3桁の連番>.jpg」 （PhotoShopのバッチ処理の出力にあわせてます）でそろえて配置するだけ。
• サムネイル用の画像も同じファイル名の形式で用意できる（元画像を縮小表示させることも可能）
• 画像ファイルサイズは固定

画像ファイルを固定にしているのは、フェード処理のためです。フェード処理は、2枚の画像(IMGタグ)をCSSの z-indexで重ね合わせるようにして配置し、script.aculo.usの effectを使って同時に表示・ 非表示を実行する事で実現しています。この時、z-indexを指定するには positionを abusoluteにしなくてはならず、 位置も固定値でしていしなければならないため、text-alignなどで中央揃えで指定できないため、今回は固定としました。 画像サイズを調べて位置を調整したり、すればいけそうですが、メンドウなのでしていません。もっとうまいやり方あったら教えてください。。。

あとソースも勢いで作ったので、比較的ぐちゃぐちゃ。prototype.js使ってるんだから OOP的に書いたほうがいいのでしょうけど、イマイチ OOP周りの使い方を理解しきれていないので、コレも見送り。 気が向いたら書き直していきます。。（ほんとうかな）ちなみに、ソースを直接書いてるのは、その方が覗きやすいかな、と思ったからです。

複数のスライドショーをカテゴライズして分ける機能とかも必要ですね。ああ、やっぱり課題盛りだくさん。

IEと FireFoxで動作確認していますが、他で動くかどうかわかりません。なんかダメだしとかありましたら、 アドバイスいただけたらと思います。

であ、また。