ImageFlow 1.2.1

ImageFlow は、iTunesのCoverFlowのように表示する画像ギャラリーです。
鏡面反射のような効果が付けられ、マウスホイールで画像をスクロールすることができます。

名称
ImageFlow_1.2.1
配布元
Shoutbox
実行環境
PHP 4.3.2+ with the GD extension 2.0.1+.
対応ブラウザ
IE 5.5+, Firefox 2.0.0.9+, Safari 1.3.2+, Google Chrome 0.2.149.30+, Opera 6.0+
ライセンス
Creative Commons Attribution-Noncommercial 3.0 Unported License
個人のWebサイトではフリー。商用サイトで使うには作者にドメイン名を知らせて許可をもらうと共に20ユーロ必要。

デモ

こちらをご覧ください。

設置方法

  1. ImageFlow_1.2.1をダウンロードし、解凍、サーバに以下のように配置します。
    [設置フォルダ]
     ├ index.htm
     ├ style.css
     ├ reflect2.php		※htmlと同じディレクトリ下に配置します。
     ├ reflect3.php		※htmlと同じディレクトリ下に配置します。
     ├ [imageflow]
     │ ├ imageflow.packed.js
     │ ├ imageflow.packed.css
     │ └ slider.png
     └ [images]
       ├ image1.jpg
       └ 以下省略
  2. 読み込む関連ファイルをhead要素内に記述します。
    パスは環境に合わせて変更してください。
    <link rel="stylesheet" href="imageflow/style.css" type="text/css" />
    	<link rel="stylesheet" href="imageflow/imageflow.css" type="text/css" />
    	<script type="text/javascript" src="js/imageflow.js"></script>
    
  3. body要素内に以下を記述します。
    <div id="unique_name" class="imageflow">
    	<img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
    	<img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
    	<img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
    	</div>
    unique_nameに固有のidを付けます。class名はimageflowとします。
    img要素のdir/image_1.jpgに画像のパス、URL_1に画像をクリックしたときに移行するリンクのURLを記述します。
    width、height属性の値(w_1h_1)は、IEでの互換性を保つために必要です。これによってIEはJavaScriptで画像の正確なサイズを読み込むことができます。
    画像の代替テキストText_1はキャプションとして表示されます。
    ※longdesc="URL_1"でURLを省略するときは、longdesc=""としてください。longdesc=""自体を省略すると、画像をクリックしたときにエラーが発生します。
  4. imageflow.packed.jsの最後に記述している以下の箇所を、上記3で付けた固有のidunique_nameに書き換えて、サーバにアップロードします。
    domReady(function(){
    	var instanceOne = new ImageFlow();
    	instanceOne.init({ ImageFlowID: 'myImageFlow' });
    	});

設置して気付いたことですが、画像はどんなサイズで作っても、真ん中に表示されるときは幅(width)が315pxぐらいになるようです。

複数設置/オプション

ページ内に複数設置することもできます。

また様々なオプションが用意されています。詳細は配布元の Documentation をご覧ください。

以下に複数設置と、最初に表示する画像の指定、キャプション非表示の例を示します。

domReady(function(){
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID: 'myImageFlow' });

	var instanceTwo = new ImageFlow();
	instanceTwo.init({ ImageFlowID: 'myExample', startID: 5, captions: false });
	});

Highslide JSとのコンビネーション

Highslide JSはlightboxのようにサムネイル画像をクリックすると拡大画像がポップアップするJavaScriptです。ポップアップしたウィンドウはドラッグすることができます。またAjaxでHTMLを読み込むこともできます。

配布元のShoutboxではこのHighslide JSとImageFlowを組み合わせた使い方がありましたので、ここでも紹介します。

  1. まず上記にしたがってImageFlowをインストール、設置します。
  2. 次にHighslide JSをダウンロードページからlatestバージョンをダウンロードします。
    Highslide JSは非商用利用の場合はフリー、商用の場合は1サイトにつき29ドルです。
  3. ダウンロードしたzipファイルを解凍し、highslide.packed.jshighslide.css そして graphics フォルダーをサーバにアップします。
  4. head要素内にhighslide.packed.js と highslide.css を読み込む記述をします。
    <link rel="stylesheet" href="highslide/highslide.css" type="text/css" />
    	<script type="text/javascript" src="highslide/highslide.packed.js"></script>
  5. imageflow.packed.jsにオプションを設定します。
    またCSSにも追加の記述をします。
    配布元では3つの例が記載されていますので、それをサンプルページに示します。
  6. HTMLには特に記述することはありませんが、ImageFlowのサンプルページでは1つの大きな画像を縮小させてサムネイル画像として表示していました。
    これだと読み込みに時間がかかりますので、当サイトのサンプルページではサムネイル画像(320px × 240px)と拡大画像(640px × 480px)を用意しています。
    <div id="Highslide_1" class="imageflow">
    	<img src="heightslideImages/whale1s.jpg" longdesc="heightslideImages/whale1L.jpg" alt="A stray whale" />
    	<img src="heightslideImages/whale2s.jpg" longdesc="heightslideImages/whale2L.jpg" alt="A stray whale" />
    	<img src="heightslideImages/whale3s.jpg" longdesc="heightslideImages/whale3L.jpg" alt="A stray whale" />
    	</div>

ページトップに戻る