Javascriptで見せる画像ギャラリー

Javascriptを使った、画像表示方法についての記事。

それほど新しい記事ではありませんが、
友人からAppleのTimeMachineのインタフェースを見せられ、
似たようなインタフェースを思い出したので、メモ。

SpaceGallery

AppleのTimeMachineのインタフェース？画面効果がこんな感じのようです。
アルバイト先にTimeMachineと表示されるサーバはあるのですが、このインタフェースは見たことがなかったです。

せっかくなので同じページにあったものをいくつか紹介。

Noobslide

画像を横（もしくは縦）にスクロールさせるような感じの、画像のスライドショー。
みよんみよん弾性が表現されているのは見事ですが、
ちょっと切り替えのスピードが速くて、人工的な感じがします。
たぶん切り替えの速さは変更可能だと思います。

Accessible News Slider

jQueryベースのスライドショー。矢印ボタンを押してスライドさせる感じです。
View Allボタンを押すと、スライドショーではなくなり、
格納されていた（隠れていた）コンテンツが一括表示される、という少し不思議なシステム。

SmoothGallery

LightBoxに近い印象を受けました。
LightBoxはページの上にレイヤーを重ねて画像を表示しますが、
これはページ内のボックスの中で効果を出す感じです。

画面上部のPicturesをクリックすると画像の一覧が表示されたり、
画面中央をクリックすると画像が大きくなったりと、機能は豊富。

ですが、ナビゲーション（進む、戻る）が非常にわかりにくく、
あまり関係ないかもしれませんが、
SmoothGalleryのページからデモページに行くのにも迷いました
（これは、私が英語読めないからかもしれません）

ちなみに、BackSpaseで前の画像に戻ることができるという機能も搭載しています

jQuery Multimedia Portfolio

インタフェースは、Appleのサイトの上のほうにある製品一覧によく似ています。
画像だけじゃなくてflvファイルやmp3も埋め込めるようです。
ただ、動きとしてはAppleサイトのほうがスムーズかなと思います。

Carousel

Carouselっていうのは、「円形」という意味だそうで。
Amazonとかにありそうな、円に配置されて回る画像の見せ方。
Amazonにある（あった？）インタフェースの方がもっとスムーズに見えますね。
結構重いです。

以上。情報元はCatsWhoCode.com。
ちなみに、元記事のJavascriptリンクは参考にしましたが、キャプションを翻訳したわけではありません。あしからず。

 

個人的にはそれほど驚きの効果はなかったので、もうちょっと数を調べて、お気に入りリストとして記事を書けたらと思います。