Adding filename to glob script - php

Question

I am using the following script to display all my images on a page. I am looking to have about 12000 images in this folder, hence the need for pagination. The files names are numbers in ascending order 1 - 12000 and must be displayed in order.
<?php
$dir = "../image/thumb/";
//Set the extensions you want to load, seperate by a comma.
$extensions = "jpeg,jpg";
//Set the number of images you want to display per page
$imagesPerPage = 20;
//Set the $page variable
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
//Load all images into an array
$images = glob($dir."*.{".$extensions."}", GLOB_BRACE);
//Count the number of images
$totalImages = count($images);
//Get the total pages
$totalPages = ceil($totalImages / $imagesPerPage);
//Make sure the page you are on is not greater then the total pages available.
if($page > $totalPages){
//Set the currnet page to the total pages.
$page = $totalPages;
}
//Now find where to start the loading from
$from = ($page * $imagesPerPage) - $imagesPerPage;
//Now start looping
for($i = $from; $i < ($from + $imagesPerPage); $i++){
//We need to make sure that its within the range of totalImages.
if($i < $totalImages){
//Now we can display the image!
echo "<img src='{$images[$i]}' alt='{$images[$i]}' />";
}
}
//Now to display the page numbers!
for($p = 1; $p <= $totalPages; $p++){
if($p == $page){
$tmp_pages[] = "<strong>{$p}</strong>";
}else{
$tmp_pages[] = "<a href='?page={$p}'>{$p}</a>";
}
}
//Now display pages, seperated by a hyphon.
echo "<br />" . implode(" - ", $tmp_pages);
?>
I need to have the filenames echo below each image how can I achieve this?
Many thanks in advance.
===== EDIT =====
This script now works with thanks to SuperScript The complete code is:
<?php
//The directory to your images folder, with trailing slash
$dir = "../image/thumb/";
//Set the extensions you want to load, seperate by a comma.
$extensions = "jpeg,jpg";
//Set the number of images you want to display per page
$imagesPerPage = 20;
//Set the $page variable
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
//Load all images into an array
$images = glob($dir."*.{".$extensions."}", GLOB_BRACE);
usort($images,function($a,$b){
$a=(int)preg_replace('~\D~','',$a);
$b=(int)preg_replace('~\D~','',$b);
return $a<$b?-1:1;
});
//Count the number of images
$totalImages = count($images);
//Get the total pages
$totalPages = ceil($totalImages / $imagesPerPage);
//Make sure the page you are on is not greater then the total pages available.
if($page > $totalPages){
//Set the currnet page to the total pages.
$page = $totalPages;
}
//Now find where to start the loading from
$from = ($page * $imagesPerPage) - $imagesPerPage;
//Now start looping
for($i = $from; $i < ($from + $imagesPerPage); $i++){
//We need to make sure that its within the range of totalImages.
if($i < $totalImages){
//Now we can display the image!
// echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><a class=\"filename\">" . basename($images[i]) . "</a>";
echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><p>" . basename($images[$i]) . " </p>";
}
}
//Now to display the page numbers!
for($p = 1; $p <= $totalPages; $p++){
if($p == $page){
$tmp_pages[] = "<strong>{$p}</strong>";
}else{
$tmp_pages[] = "<a href='?page={$p}'>{$p}</a>";
}
}
//Now display pages, seperated by a hyphon.
echo "<br />" . implode(" - ", $tmp_pages);
?>

Answer 1

Try changing your echo line (//Now we can display the image!):
echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><p>" . basename($images[$i]) . "</p>";
The basename() function returns just the filename of a file.
And to sort correctly, add this line after you get $images:
usort($images,function($a,$b){
$a=(int)preg_replace('~\D~','',$a);
$b=(int)preg_replace('~\D~','',$b);
return $a<$b?-1:1;
});