CoverFlowのようなギャラリーを表示するJavaScript – ImageFlow

JavaScript

とあるサイトでクールなUIを実現するために、iTunesのCoverFlow風のイメージギャラリーを表示させることにした。様々なJavaScriptを試してみたところ、どれも表示が微妙だったり、実行速度が遅かったりと、実用に耐えられるものがない。しかし、一つだけまともなスクリプトを発見した。

ImageFlow

その名も「ImageFlow」。PHPとCSSを駆使して、CoverFlow風の美しいイメージギャラリーを作成することが可能となる。実行環境にPHPは必須となってしまうが、今時使えないサーバを見つけるのが難しいほど。なので特殊なケース以外は問題ないだろう。

簡単に仕組みを説明すると、サムネイル画像を読み込み、それに自動的に鏡面処理加工をしてくれる。そしてCoverFlowのように、横にスライドさせて画像を動かすことが出来る。その時興味深いのが、スクロールで左右に動かすことが出来る点。さらに下のスライドバーの操作も可能だし、端っこの画像をクリックすれば、中央まで自動的に移動してくる。うまくカスタマイズすれば、かなり使い勝手の良いイメージギャラリーの作成ができそうだ。

設置方法

以下のURLからImageFlowのダウンロードリンクがある。

ImageFlow
http://imageflow.finnrudolph.de/

ダウンロードしたらファイルを解凍して、任意の場所にアップロード。その時、「reflect2.php」「reflect3.php」だけは、設置ページと同じディレクトリに配置しないと、正常に動かないので注意しよう。

次に<head>〜</head>の間に以下のように記述して、JavaScriptとCSSを読み込ませる。

<link rel="stylesheet" href="[imageflow.cssのURL]" type="text/css" />
<script type="text/javascript" src="[imageflow.packed.jsのURL]"></script>

なお、「imageflow.packed.js」は「imageflow.js」を圧縮したファイル。実行環境によって左右されるので、不具合があるようだったら「imageflow.js」を利用する。

イメージギャラリーを設置したいページに、以下のようにコードを書く。

<div id="myImageFlow" class="imageflow">
<img src="[サムネイル画像までのURLを相対パスで表記]" longdesc="[クリック後に開く画像(ファイル)のURL]" alt="Image1" width="500" height="332" />
<img src="[サムネイル画像までのURLを相対パスで表記]" longdesc="[クリック後に開く画像(ファイル)のURL]" alt="Image2" width="500" height="332" />
<img src="[サムネイル画像までのURLを相対パスで表記]" longdesc="[クリック後に開く画像(ファイル)のURL]" alt="Image3" width="500" height="332" />
<img src="[サムネイル画像までのURLを相対パスで表記]" longdesc="[クリック後に開く画像(ファイル)のURL]" alt="Image4" width="500" height="332" />
<img src="[サムネイル画像までのURLを相対パスで表記]" longdesc="[クリック後に開く画像(ファイル)のURL]" alt="Image5" width="500" height="332" />
</div>

サムネイル画像までのURLの表記方法は、相対パスで書かないと認識しないで注意が必要。クリック後に表示したい画像(ファイルでも可)は、ルートでも絶対でも好きなように書ける。また、altは画像下に表示されるテキストに使われるので、必要に応じて使い別けよう。

表示画像を増やしたい場合は、<div id=”myImageFlow” class=”imageflow”>の中に<img src…>を追加すればOK。

なお、IE6の環境だと、JavaScriptエラーが発生してしまう、画像の高さ幅指定をしないと崩れてしまうなどの不具合がある。せっかくここまで完成度が高いJavaScriptなのにもったいない・・・。今後のバージョンアップで完全対応することを期待しよう。

PHPとCSSで微妙な調整が可能

まだテストで設置したのみで、いじくってはいないが、PHPファイルを見た限りでは、簡単に設定を変更するようにできているし、CSS側で見た目を調整することもできる模様。本家サイトでも数パターンのギャラリーが設置してあるので、興味ある人はみてみるといいだろう。

CoverFlow
CoverFlow
ImageFlow
ImageFlow

related story