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

このエントリーをはてなブックマークに追加

非常に美しいスライドギャラリー『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>

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

サンプル

関連エントリー

画像に光沢を与えるjsライブラリ『Glossy.js』
LightBox風にコンテンツを表示するModalbox
画像に鏡面効果を与えるreflection.js
クロスフェードを実装する為のCrossfader
アルファ画像を扱うalphafilter.jsライブラリ

スポンサードリンク

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

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

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

投稿者: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タグをコピペしたんですが
画像が読み込まれません。
IEだと×印がでます。firefoxだとaltが
ウィンドウ上辺にくっついた状態ででます。
スクロールは問題なく、
×印、altをクリックすると画像のみのウィンドウにちゃんと飛びます。

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

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

の部分を

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

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

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

長文失礼致しました。

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

screen.css側を

#imageflow img {position:absolute;}

にすればよいかと。

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

>hiroroさん

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

>yanagiさん

おそらくGDライブラリがインストールされていないからだと思います。
GDライブラリはインストールにPHPの再コンパイルが必要で、ちょっと難易度は高いですががんばってみてください。

投稿者:西畑一馬 | 2008年7月 1日 00:11

GDなるライブラリがあるんですね。
勉強になりました。
iniファイルのGDを有効にしたらできました!
ありがとうございました!

投稿者:yanagi | 2008年7月 1日 23:30

はじめまして!
なかなか少ないIMageFlowの記事を発見して非常にうれしく存じます。

早速なのですが、ご指摘の自動的にデータを取得する修正を施したところ、表示がうまくされませんでした。静的記述の場合はうまく表示されているので、ほかの問題ではないと考えております。

画面にprint文の最後の部分がゴミのように「';}}」というのが、左上に表示され、どうやらPHPが正しく動いていないような気配です。ちなみに、phpinfoなどは表示されていることを確認し、またコマンドラインは、追加したPHPふぁけを切り抜き、正しく動いていることを確認しました。

印象的にはHTMLとPHPの構文解析の順番や愛称の問題のような振る舞いをしている印象です。皆様は無事動いていらっしゃるようなのですが、何か注意点はありませんでしょうか? PHPのVersionは5.2.6 です。

ご指導いただければ幸いです。

投稿者:やす | 2009年2月 4日 04:14

>やすさん

PHP5.26での動作も確認しておりますのでスクリプトの問題ではないと思います。
PHP自体が動作してない感じですが、拡張子は.phpに変更されているでしょうか?

投稿者:西畑一馬 | 2009年2月18日 15:34

はじめまして

javascriptは、ほとんど理解できておりませんが、
しかし、非常に美しいcoverflowスライドギャラリー『ImageFlow』を利用したいとおもいます。
たいへん厚かましいお願いですが、ヘッダーと記事投稿欄にHTMLをアップしても表示しません。
何処か記述を変更しない表示できないのは、分かりましたが、何処をどうのように変更するれば良いのか教えてもらえませんか?
 宜しくお願いします。

投稿者:森慎太郎 | 2011年1月13日 10:31

>森慎太郎さん

御サイトの環境がわからないのでなんとも言えませんが、ヘッダーと記事投稿欄にHTMLをアップするだけでなくjsファイルやcssファイルをアップする必要があります。

投稿者:西畑一馬 | 2011年1月13日 12:28
コメントを投稿