Adding filename to glob script

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;
});