オレオレGyazoギャラリーのソース公開

おれおれGyazo用にギャラリーページを作ったのでその解説っぽいのを。
PHPは素人なので、まだ無駄がある筈だけど、動いているから気にしないスタイル。

機能としては、ざっくりと以下。

画像の更新日時で降順にソート
画像以外は処理しない
画像の一部を表示してサムネイル（のように）表示
ページング処理
サムネ風画像をクリックでlightbox表示

という事でギャラリーのソースをどーん。
解説部分は主にソース内のコメント。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>gallery</title>
	<link rel="stylesheet" href="css/gallery.css" type="text/css" />
	<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="lightbox/js/lightbox.min.js"></script>
	<script type="text/javascript" src="js/gallery.js"></script>
</head>
<body>
<h1 class="ttl">Gyazo 一覧</h1>
<div class="canvas">

<?php
	// 画像のディレクトリ指定
	$imgdir = opendir("./images"); // 画像の置いてあるパス
	while(false!==($file = readdir($imgdir)))
	{
		// 面倒なので画像ファイル名にパスをくっつけておく
		if ( is_file ( "./images/$file" ) )
		{
			$files[] = "./images/$file";
		}
	}
	
	// ソート用
	$sortWork = array() ;
	
	$i = 0 ;
	foreach ( $files as $name )
	{
		//$sortWork[N] の [0]にファイル名、[1]にファイル更新日
		$sortWork[$i][0] = $name ;
		// ファイルの更新日時を取得
		$sortWork[$i][1] = date("Y/m/d H:i", filemtime( $name )) ;
		$i++ ;
	}
	 
	// $sortWork をファイルの更新日時でソート
	usort($sortWork, "usrt") ;
	
	// ファイルの数をカウントしておく
	$cnt = count($sortWork);
	
	$nowPage	= $page = empty($_GET["p"]) ? 1 : $_GET["p"];	// 現在ページ判定
	$viewCnt	= 20;											// １ページの最大画像数
	$maxPage	= ceil($cnt/$viewCnt);							// 総画像数からページ数を求める
	$start		= ($nowPage - 1) * $viewCnt;					// 画像カウンタの開始位置
	
	// 画像出力
	if ( $cnt != 0 && $nowPage <= $maxPage )
	{
		print "<ul id='gallery'>";
		for ( $i = $start; ($i < $start+$viewCnt) ; $i ++ )
		{
			if ( $i >= $cnt )
			{
				break;
			}
			// 画像かどうかを調べて画像以外はスキップ
			if( exif_imagetype ( $sortWork[$i][0] ) != false )
			{
				print "<li class='thumb'><a href='".$sortWork[$i][0]."' data-lightbox='g'><img src='".$sortWork[$i][0]."' /></a><span class='uploadDate'>".$sortWork[$i][1]."</span></li>\n";
			}
		}
		print "</ul>\n";

		// ページャ
		$limit = 10;
		print '<div id="pagerContainer" class="clearfix"><ul class="pager">'."\n";
		// 最初のページ
		if ( $nowPage > ( $limit / 2 ) )
		{
			print '<li><a href="?p=1">New</a></li>'."\n";
			print '<li>|</li>'."\n";
		}
		// 途中。表示ページ数は 10 として、それを超える場合は前後を…表示として省略
		for ( $pc = $nowPage - ( $limit / 2 ) < 1 ? 1 : $nowPage - ( $limit / 2 ) ; $pc < $nowPage; $pc ++ )
		{
			print '<li><a href="?p='.$pc.'">'.$pc.'</a></li>'."\n";
		}
		
		print '<li><span>'.$nowPage.'</span></li>';
		
		for ( $pc = $nowPage + 1; $pc < $nowPage + ( $limit / 2 ) && $pc <= $maxPage; $pc ++ )
		{
			print '<li><a href="?p='.$pc.'">'.$pc.'</a></li>'."\n";
		}
		
		// 最後のページ
		if ( $nowPage <= $maxPage - ( $limit / 2 ) )
		{
			print '<li>|</li>'."\n";
			print '<li><a href="?p='.$maxPage.'">Old</a></li>'."\n";
		}
		print "</ul></div>\n";
	}
	else
	{
		print '<p>画像データがありません！</p><a href="?p=1">ギャラリートップ</a>';
	}
	print "<hr >";
?>
</div>
</body>
</html>

<?php
// ==============================================================
// functionName			usrt
// 引数					$a,$b共に二次元配列
// 処理					USORT用 ソートは 配列の[N][1] で実施する
// ==============================================================
function usrt( $a, $b )
{
	if ( strtotime( $a[1]) > strtotime($b[1]) )
	{
		return -1;
	}
	else if ( strtotime($a[1]) < strtotime($b[1] ) )
	{
		return 1;
	}
	else
	{
		return 0;
	}
}

?>

初めてjQueryを使用したので、そのリンクも入れています。
プラグインでlightbox2を使用しています。
自前のjQueryは、画像へのマウスホバーで更新日時を表示する箇所。
もうちょっとマシなコードが掛けるようになったら書き直すかもしれないけど、当面は私的利用のみなのでこのまま突っ切るつもりではある。