PHPを使って、クリックでめくる画像アルバムの作成

　写真画像のサムネイルをマウスでクリックすると、拡大された画像が現れ、さらにその拡大された画面をクリックすると次の拡大画像が見られるような画面をPHPで作成してみます。PHPだと案外簡単に作成できます。

PHPを使って、クリックでめくる画像アルバムの作成方法

　ウェブページを見ていると、写真画像のサムネイル（小さな画像）が集まったウェブアルバムを見かけます。

　サムネイルをクリックすると、拡大された画像が新しいウィンドウで現れるものがあります。

　ここでは、拡大されて現れた画面上で、次の画像を見たり、前の画像に戻るシステムを

　PHPで作成する方法を説明します。

　はじめに、目指す完成物「中国上海の麺」を下に示します。


日本で言うところの「やきそば」かな	ワンタン入りの麺

目玉焼きと青椒肉絲（ﾁﾝｼﾞｬｵﾛｰｽ）入り麺	目玉焼きと牛肉入り麺

　上のサムネイル画像をクリックすると、拡大された画像が現れます。

　さらに、現れた拡大画像をクリックすると、次の画像へ変わります。

　「次へ」をクリックしても、次の画像へ変わり、「前へ」では前の画像へ移ります。

　なお、「次へ」をクリックし続けると、画像は繰り返すようにしています。

　では、実際の作り方です。

　１．サムネイル画像を用意し、下記の内容をHTMLに記述し、

　　　リンク先に引数をもったPHPを設定します。

<A href="Image.php?id=1" target="_blank">
<IMG src="thumbnail1.jpg" width="90" height="90"
border="0">
</a>

　　　ここでは、Image.phpへリンクしています。「?」以降は引数で、「id=1」を引数にしてPHPへ渡します。

　２．上記HTMLと同じフォルダに、PHPファイル「Image.php」を作成します。

<html>
<head>&lttitle>Image.php</title></head>

<body>
<?php

/*前提条件:画像番号1～$n(1.jpgなど)までの$n枚の拡大画像をimageフォルダに用意*/
/*個々に設定すべき場所は☆1～2*/

/*☆1　画像枚数$nを設定*/
$n=4;


/*引数の読込み*/
$a=$_GET['id'];

/*画像ファイル名*/
$file=(string)$a;
$file=$file.".jpg";

/*画像クリックで次の画像へ*/
$a=$a+1;
if($a==($n+1)) $a=1; //画像の繰返し

/*画像出力と、画像クリックで次画像出力のための再帰呼び出し*/
/*☆2　画像の場所や大きさなどを設定*/
echo '<a href="Image.php?id='.$a.'">
<img src=image/'.$file.' height="1024" width="1024" ></a>';


/*前への設定*/
$a=$a-2;
if($a==-1) $a=($n-1);
if($a==0) $a=$n;
/*再帰呼び出し*/
echo '<br>　<a href="Image.php?id='.$a.'">前へ</a>';


/*次への設定*/
$a=$a+2;
if($a==($n+1)) $a=1;
if($a==($n+2)) $a=2;
/*再帰呼び出し*/
echo '　<a href="Image.php?id='.$a.'">次へ</a>';


?>
</body>
</html>

　　　あとは、ファイルをアップロードすれば完了です。

　紹介した事項により生じた不都合などには責任は負えませんので、くれぐれも自己責任でお願いします。