非常に美しいcoverflowスライドギャラリー『ImageFlow』

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

非常に美しいスライドギャラリー『ImageFlow』

ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。

設置方法

配布サイトより関連ファイルをダウンロードし、サーバーにアップします。

スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。

<link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="imageflow.js"></script>

スライドを利用したい箇所に以下のHTMLコードを記述します。

<div id="imageflow"> 
	<div id="loading">
		<b>Loading images</b><br/>
		<img src="loading.gif" width="208" height="13" alt="loading" />
	</div>
	<div id="images">
		<img src="reflect.php?img=画像の相対パス" longdesc="画像の相対パス" alt="キャプション" />
		・
		・
		<img src="reflect.php?img=画像の相対パス" longdesc="画像の相対パス" alt="キャプション" />
	</div>
	<div id="captions"></div>
	<div id="scrollbar">
		<div id="slider"></div>
	</div>
</div>

これだけで簡単にcoverflowスライドギャラリーが設置できます。

サンプル

画像データを自動的に取得する

もうちょっと便利に利用するために、PHPで特定のディレクトリの画像の一覧を取得してスライドギャラリーにするスクリプトを書いてみました。

これを利用すれば画像をフォルダにアップすれば勝手にスライドに追加されていきます。

<div id="imageflow"> 
	<div id="loading">
		<b>Loading images</b><br/>
		<img src="loading.gif" width="208" height="13" alt="loading" />
	</div>
	<div id="images">
<?php
$img_dir = "./img";
if ($handle = opendir($img_dir)) {
	while (false !== ($file = readdir($handle))) {
		if($file==".." or $file==".")continue;
		print '<img src="reflect.php?img='.$img_dir.'/'.$file.'" longdesc="'.$img_dir.'/'.$file.'g" alt="" />';
	}
}
?>
	</div>
	<div id="captions"></div>
	<div id="scrollbar">
		<div id="slider"></div>
	</div>
</div>

画像の判定などの細かい処理は書いてないのでディレクトリには画像だけアップしてください。

サンプル

スポンサードリンク

日時: 2008年2月 6日 22:10
javascript

«エントリーテンプレートでのMTIfCategoryの挙動 | メイン | Web制作会社における求人»

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/42

コメント

任意のフォルダを指定して自動に画像を表示を
したいのですがｐｈｐをどのどこを変更すればよいのでしょうか

投稿者:nisida | 2008年5月27日 15:14

>nisidaさん

$img_dir = "./img";

の箇所を任意のフォルダに変更してもらえたらと

投稿者:西畑一馬 | 2008年6月 3日 23:49

index.htmlにメインのstyle.cssファイルを参照している場合
screen.cssを利用するには
中のタグがダブルと思いますが（たとえばimgタグなど）

screen.css側
img {position:absolute;｝

style.css側
img { border:0; }

など干渉しないで、うまく配置するにはどうすればよいでしょうか？

投稿者:hiroro | 2008年6月10日 10:31

いつも参考にさせてもらっております。

初めてコメントさせて頂きますが
いきなり質問です＾＾；

image flowを上記の通り
cssファイル、javascriptをリンクさせ
id=imageflowのdivタグをコピペしたんですが
画像が読み込まれません。
ＩＥだと×印がでます。firefoxだとaltが
ウィンドウ上辺にくっついた状態ででます。
スクロールは問題なく、
×印、altをクリックすると画像のみのウィンドウにちゃんと飛びます。

色々いじってみたところ画像指定の

------------------------------------------------------------
src="reflect.php?img=画像の相対パス"
------------------------------------------------------------

の部分を

------------------------------------------------------------
src="画像の相対パス"
------------------------------------------------------------

とすると読み込まれます。
鏡面反射のｐｈｐを使う場合
何かサーバーの設定をしなければいけないのでしょうか？
ちなみにローカルＰＣにインストールされているphpは5.2.0です。

テストしたサーバーは以下の通りです。
Apache　2.0（ローカル）
Apache　2.2（ローカル）
忍者ツールズ無償版
fc2無償版（ｐｈｐのみアップロードエラー　550）

長文失礼致しました。

投稿者:yanagi | 2008年6月19日 15:45

screen.css側を

#imageflow img {position:absolute;｝

にすればよいかと。

投稿者:Delipot | 2008年6月25日 18:46

＞hiroroさん

Delipotさんが書かれてる方法でいけると思います。