これはスゴい。iPhotoユーザーならピンとくると思うけど、08からサポートされたイベントのインターフェースを模したフォトギャラリー。ウェブ上でJavascriptを使って再現されてます。イベント上でマウスポインタを左右に移動する事で、イベント内の写真のサムネールを確認することもできます。写真の枚数に応じて黒い線の太さが変わる点などは、iPhoto以上の機能と便利さ。イベント内では2つの表示法で写真の閲覧が可能。現状Safari 3.1 (mac/win)、Firefox 2.x、Internet Explorer 7で動作するみたいで、今後対応ブラウザは増えるそうです。Javascriptを使ったフォトギャラリーとしては個人的には過去にないほどエクセレントな印象。何よりマックっぽいという点で素晴らしい。いつか使ってみたいなこれ。
以前Flashを使って作成されたものをよく見かけた、伸縮する画像を使ったメニュー。最近じゃJavascriptで表現できるようです。これがなかなか素晴らしい出来で、サイトのメインナビゲーションとしても使えそう。Firefox 2 (mac / pc)、IE 7、IE 6、Safari (mac)で動作し、Javascriptライブラリとしてmootools v1.11が必要だそうです。試しにソースをダウンロードしてみたら、特にmootoolsを別途用意しなくても動いたので、同梱されているようです。
Javascriptを使って、formタグ内のチェックボックスやラジオボタンをグラフィカルに見せる手法。名前が名前なんで、以前紹介したFancyZoomと何か関係があるのかと思ったけど、そうでもないみたい。これなかなかイイ感じ。通常のチェックボックス等よりも見やすいし、クリック範囲が広い分実用的。その内使ってみたいJS。
flickrで写真を閲覧する際に、写真の個別ページ（例えばこんなページ）や、拡大表示時（例えば例えばこんなページ）に写真以外の部分をブラックアウト、もしくはホワイトアウトさせる事で、ブラウザウィンドウ内を写真のみにするというブックマークレット。使い方は、サイト内に用意されてる４つのボタンをブラウザのブックマークバーにでも放り込んでおけばオッケー。写真だけを見たいページで放り込んだブックマークレットをクリックすれば、写真だけになります。解除する時はもっかいブックマークレットをクリックすれば元に戻ります。サイト内の黒文字のボタンがブラックアウト用、白文字がホワイトアウト、カッコの付いてるものは写真の輪郭に縁取りが付きます。どれか１つ気に入った物を選べばイイと思います。ちなみにブックマークレットはJavascriptで書かれているので、JSがオフになっている設定のブラウザでは反応しないと思います。また一覧ページでも適用されません。単純な機能なんだけど、意外と重宝しそう。flickrの白背景ってまぶしい時もあるから、自分は黒の輪郭ナシがイイ感じ。
lightboxのようなポップアップによるコンテンツ表示Javascript。画像以外にもFlash, Movie, HTMLといったコンテンツが表示できます。タイトル類が下からニュイっと出てくるのが、なんだかイイ感じ。“Usage”のページに細かい使用法が書いてありますが、lightboxと同じように“rel”を使って適用するようです。これ系の見せ方ってホント色々あるので、目的に応じて選べるようになってきましたね。
パっと見Flashとしか思えない動きをする、JSで作られたスライドショー。JSライブラリにはjQueryを使っているようです。最初見た時は「あぁ、Flashを使ったスライドショーswfか」って思ったけど、右クリしてビックリ。Flashじゃなかったんです。いやーこれはスゴい。まぁスゴい言うてもフェードイン効果を使っているだけなんだけど、トータルで完成されてる感じに感動しました。デモは“Demos”という欄から見る事ができます。いずれ気合いの入った写真を公開する際などに使ってみたい。ちなみにダウンロードはこちらからできます。jQueryライブラリ使ったJSって意外とアツいんだよなー。
Prototypeを使った、Javascriptユーザーインターフェースライブラリ。主な機能は透明なボーダーを引けるという事らしいんだけど、他にもLightbox的なポップアップ表示を行う事もできるようです。“Usage”のページからデモを見る事ができますが、基本的にはサイト全体がデモのような感じ。Windows Vistaのウィンドウ表示のような印象。IE 6 + 7、Firefox 2、Opera 9、Safari 3で動作するようです。以前のmBlogでIEハックを併用して同じようなことをしようとしたんですが、なんかいろんな理由でミスったような覚えがあるので、今度似たようなデザインをする時にはイイかもしんない。
lightboxに近いコンテンツの見せ方なんだけど、出てくる場所やエフェクトがちょっと違うというJavascript。下からニュイっと出てくるので、例えばブログのナビゲーション類をここに集約させるとか、サイト内の特定のコンテンツの詳細説明を出すとか、そんな感じの使い方ができそう。ただ高解像度のディスプレイを使っている人の多くは画面上部にポインタ位置が集中するので、不便という見方もできます。サイト下部の“Sample”から動作確認ができます。必要に応じて使ってみたいJS。っていうかそろそろlightbox系のJSのまとめ記事でも作ろうかな。
