和田憲幸のブログ

PictViewer for Javascript

jqueryのことなんかすっかり忘れていた私は普通に手書きでシコシコとJavascriptを書いてしまいました。最初はActionScriptで書こうと思ってたのですが、まぁjs使いの端くれとしてやっぱJavascriptですかねって事でJavascriptで書いてみました。

動作はマウスでドラッグしたら写真が動くってだけです。それだけじゃつまらないのでフルスクリーン表示（ブラウザ内の）とサムネイルビューを付けてみました。試行錯誤しながら作っただけにソースはグッチャグチャでお見せできるようなもんではありませんが最適化したらきっとキレイになるだろうなって構造にはなっています。

写真の切り替え時にはプリローダ的なGIFアニメーションが動きますね。動作の確認はFirefox、Safari、Chorome、Opera、IE6で行って問題なく動いたので大丈夫かなと。Firefoxだけ最後の最後までうまくいかなかったんですが、ドラッグするdivの中身が空だったらうまく動作しないみたいで、中にテキストいれたらちゃんと動きました。Firefoxはキライだっ！

ということで、パノラマ写真とか大きい写真を魅せたい！という場合のスクリプトでした。