usort()
次のように、PHP の関数を使用してファイル名を並べ替えることができます。
usort($dir_contents, create_function('$a,$b', 'return filemtime("'.$dir.'/$a")<filemtime("'.$dir.'/$b");'));
上記は、ファイルの最終変更時刻で配列をソートします。ファイルの作成時間で並べ替えるにはfilemtime
、filectime
関数に置き換えるか ( Unix での戻り値の意味について公式ドキュメントを確認することもできます)、またはデータベースからファイルのアップロード時間を記憶/取得します。上記のコンパクトな PHP の並べ替えは、この回答に基づいています。
もう 1 つの方法は、Javascript で画像をソートすることです。PHP コードは次のようになります。
<div id="container">
<?php
$dir = 'files';
$file_display = array('jpg', 'jpeg', 'png', 'gif');
if(file_exists($dir) == false){
echo 'Directory \''.$dir,'\' not found!';
} else {
$dir_contents = scandir($dir);
foreach($dir_contents as $file){
if($file == '.' || $file == '..') { continue; }
$arr = explode('.',$file);
$file_type = strtolower(end($arr));
if(in_array($file_type, $file_display)){
echo '<img src="', $dir, '/', $file,'" alt="', $file,
'" data-m="', filemtime("$dir/$file"),
'" data-u="', filectime("$dir/$file"), '" />';
}
}
}
?>
</div>
および関連する JavaScript
var container, images, arr;
function prepare_images(){
container = document.getElementById('container');
images = container.getElementsByTagName('img');//nodeList object
arr = [];
for (var i=0;i<images.length;i++) {
arr[i] = images[i];
}
sort_images('data-m');
}
function sort_images(attr){
arr.sort(function(a,b){
return parseInt(a.getAttribute(attr),10) - parseInt(b.getAttribute(attr),10);
});
for (var i=0;i<arr.length;i++) {
container.appendChild(arr[i]);
}
}
if (window.addEventListener) {
window.addEventListener("load", prepare_images, false);
} else if (window.attachEvent) {
window.attachEvent("onload", prepare_images); //for IE5-8
}
test.php @ pastebin