PHP - Gallery Reading From Directory *random Placement*

Hello,
     
     I have this script that I am trying to work with, it works and It is a basic image viewer/Gallery and it reads from a directory, I have all my images like so 1.png, 2.png, 3.png etc.
They show up just wonderful and does what I want it to do. but I cannot get it to read the directory in numeric form. Here is my code that I am working with

<?php
require_once("data/connect.php");

// set the absolute path to the directory containing the images
define ('IMGDIR', 'birthday/');
// same but for www
define ('WEBIMGDIR', 'birthday/');
// set session name for slideshow "cookie"
define ('SS_SESSNAMEB', 'slideshow_sessb');
// global error variable
$err = '';
// start img session
session_name(SS_SESSNAMEB);
session_start();
// init slideshow class
$ss = new slideshow($err);
if (($err = $ss->init()) != '')
{
header('HTTP/1.1 500 Internal Server Error');
echo $err;
exit();
}
// get image files from directory
$ss->get_images();
// set variables, done.
list($curr, $caption, $first, $prev, $next, $last) = $ss->run();
/*
slideshow class, can be used stand-alone
*/
class slideshow
{
private $files_arr = NULL;
private $err = NULL;

public function __construct(&$err)
{
$this->files_arr = array();
$this->err = $err;
}
public function init()
{
// run actions only if img array session var is empty
// check if image directory exists
if (!$this->dir_exists())
{
return 'Error retrieving images, missing directory';
}
return '';
}
public function get_images()
{
// run actions only if img array session var is empty
if (isset($_SESSION['imgarr']))
{
$this->files_arr = $_SESSION['imgarr'];
}
else
{
if ($dh = opendir(IMGDIR))
{
while (false !== ($file = readdir($dh)))
{
if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
{
$this->files_arr[] = $file;
}
}
closedir($dh);
}
$_SESSION['imgarr'] = $this->files_arr;
}
}
public function run()
{
$curr = 1;
$last = count($this->files_arr);
if (isset($_GET['img']))
{
if (preg_match('/^[0-9]+$/', $_GET['img'])) $curr = (int)  $_GET['img'];
if ($curr <= 0 || $curr > $last) $curr = 1;
}
if ($curr <= 1)
{
$prev = $curr;
$next = $curr + 1;
}
else if ($curr >= $last)
{
$prev = $last - 1;
$next = $last;
}
else
{
$prev = $curr - 1;
$next = $curr + 1;
}
// line below sets the caption name...
$caption = str_replace('-', ' ', $this->files_arr[$curr - 1]);
$caption = str_replace('_', ' ', $caption);
$caption = preg_replace('/\.(jpe?g|gif|png)$/i', '', $caption);
$caption = ucfirst($caption);
return array($this->files_arr[$curr - 1], $caption, 1, $prev, $next, $last);
}
private function dir_exists()
{
return file_exists(IMGDIR);
}

}
?>
<?
// Image files array 
$image_files = array( );
 
// Array to store the images that were sorted
$image_sorted = array( );
 
// Read the extension of the file name passed
function readExtension( $file )
{
$extension = substr( $file, strrpos( $file, '.' ) + 1 );
return $extension;
}
 
// This may already exist but I was in a coding frenzy.  Obviously, this checks if it is an image or not
function isImage( $file )
{
$extension = readExtension( $file );
$valid_images = array( "gif", "jpg", "jpeg", "png", "gif" );
for( $i = 0; $i < sizeof( $valid_images ); $i++ )
{
if( $extension == $valid_images[ $i ] )
{
return true;
}
}
}
 
// Traverse the directory and get all the images in that folder
function getImagesInFolder( $dir )
{
if( $handle = opendir( $dir ) )
{
while( false !== ( $file = readdir( $handle ) ) )
{
if( $file != "." && $file != ".." && $file != "Thumbs.db" )
{
if( !( is_dir( $dir . $file ) ) )
{
$file_fp = $dir . $file;
if( isImage( $file_fp ) ) array_push( $GLOBALS['image_files'], $file_fp );
}
}
}
closedir( $handle );
}
}
 
 
//The brunt of the post.  Explained below in more detail
function sortByModDate( $array_in, &$array_out )
{
for( $i = 0; $i < sizeof( $array_in ); $i++ )
{
$time_stamp = date("G:i:s-d-m-y", filemtime( $array_in[ $i ] ) );
$array_out[ $array_in[ $i ] ] = $time_stamp;
}
arsort( $array_out, SORT_STRING );
$array_out = array_keys( $array_out );
if( $array_out[ 0 ] == "0" ) array_shift( $array_out );
unset( $array_in );
}
 
// Get the sorted file by index number.  This seems a bit redundant so you can modify as you see fit.
function getSortedImageByIdx( $index_num )
{
sortByModDate( $GLOBALS['image_files'], $GLOBALS['image_sorted'] );
return $GLOBALS[ '{image_sorted[ $index_num ]}' ];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Great Escape Spalon</title>


<!-- BEGIN CSS STYLES -->

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
body{margin: 0;padding: 0;font: 100% Verdana, Arial, Helvetica, sans-serif;font-size: 14px;}
div#gallery{margin: 40px auto;text-align: center;}
div#gallery img{margin: 20px;}
div#gallery p{color: #004694;}
div#gallery div.pn{padding: 10px;margin: 0 5px;}
a{color:#333;}
a:hover{color:#cc0000;}
a.sp{padding-right: 40px;}
    </style>
<style type="text/css">
#main {
position: relative;
width: 1024px;
margin: 0 auto;
height:auto;
vertical-align: middle;
}

#footer {position: absolute; bottom: 0; left: 0; width: 600px; height: 50px;} 

html, body
{
 
  background-image:url(img/background.png);
background-repeat:repeat-x;
}
#apDiv1 {
position:absolute;
background-image:url(img/sides.png);
top: 1px;
left: 1px;
width: 1017px;
}
#apDiv2 {
position:absolute;
width:206px;
height:384px;
z-index:3;
left: 50px;
top: 127px;
}
#apDiv3 {
position:absolute;
width:216px;
height:386px;
z-index:4;
left: 715px;
top: 128px;
}
#apDiv4 {
position:absolute;
width:970px;
height:115px;
z-index:5;
top: -1px;
left: 1px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 296px;
top: 9px;
}

#apDiv6 {
position:absolute;
width:342px;
height:115px;
z-index:2;
left: 101px;
top: 129px;
}
#apDiv7 {
position:absolute;
width:452px;
height:115px;
z-index:6;
left: 295px;
top: 177px;
}

/* Left Menu */
#apDiv8 {
position:absolute;
width:0px;
height:0px;
z-index:7;
left: 123px;
top: 179px;
}
#apDiv9 {
position:absolute;
width:3px;
height:2px;
z-index:8;
left: 123px;
top: 233px;
}
#apDiv10 {
position:absolute;
width:13px;
height:2px;
z-index:10;
left: 123px;
top: 272px;
}
#apDiv11 {
position:absolute;
width:3px;
height:0px;
z-index:11;
left: 123px;
top: 313px;
}
#apDiv12 {
position:absolute;
width:1px;
height:1px;
z-index:12;
left: 120px;
top: 354px;
}
#apDiv13 {
position:absolute;
width:0px;
height:0px;
z-index:13;
left: 120px;
top: 399px;
}
#apDiv14 {
position:absolute;
width:3px;
height:2px;
z-index:14;
left: 123px;
top: 449px;
}
#apDiv15 {
position:absolute;
width:1px;
height:0px;
z-index:15;
left: 123px;
top: 492px;
}
#apDiv16 {
position:absolute;
width:1px;
height:1px;
z-index:16;
left: 123px;
top: 537px;
}
#apDiv17 {
position:absolute;
width:2px;
height:2px;
z-index:17;
left: 123px;
top: 581px;
}

/* Right Menu */
#apDiv18 {
position:absolute;
width:2px;
height:4px;
z-index:18;
left: 774px;
top: 179px;
}
#apDiv19 {
position:absolute;
width:4px;
height:0px;
z-index:19;
left: 774px;
top: 233px;
}
#apDiv20 {
position:absolute;
width:4px;
height:3px;
z-index:20;
left: 774px;
top: 315px;
}
#apDiv21 {
position:absolute;
width:49px;
height:1px;
z-index:21;
left: 774px;
top: 360px;
}
#apDiv22 {
position:absolute;
width:1px;
height:1px;
z-index:22;
left: 774px;
top: 405px;
}
#apDiv23 {
position:absolute;
width:21px;
height:0px;
z-index:23;
left: 774px;
top: 450px;
}
#apDiv24 {
position:absolute;
width:3px;
height:0px;
z-index:24;
left: 774px;
top: 496px;
}
#apDiv25 {
position:absolute;
width:5px;
height:0px;
z-index:25;
left: 774px;
top: 536px;
}
#apDiv26 {
position:absolute;
width:5px;
height:0px;
z-index:26;
left: 774px;
top: 272px;
}
#apDiv27 {
position:absolute;
width:0px;
height:0px;
z-index:27;
left: 773px;
top: 579px;
}
#apDiv28 {
position:absolute;
width:448px;
height:501px;
z-index:28;
left: 277px;
top: 137px;
}

#apDiv29 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 711px;
top: 914px;
}
</style>
<!-- END CSS STYLES -->

<!-- BEGIN LIGHTBOX JS -->

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<!-- END LIGHTBOX JS -->

</head>
<body>
<!-- MAIN LAYOUT -->
<div id=main>
<div id="apDiv1"><img src="img/sides.png" width="995" height="1016"/></div>
<div id="apDiv2"><img src="img/left_menu/leftmenu.png" /></div>
<div id="apDiv3"><img src="img/left_menu/leftmenu.png" /></div>
<div id="apDiv4"><img src="img/flower_top.png" width="1016" /></div>
<div id="apDiv5"><img src="img/top_logo.png" width="446" /></div>
<div id="apDiv6"><img src="img/middle_white_flower.png" width="840"  /></div>
<div id="apDiv7"><img src="img/back_center.png" width="453"/></div>
<!-- END MAIN LAYOUT -->

<!-- LEFT MENU BEGIN -->
<div id="apDiv8"><img src="img/left_menu/menu.png" /></div>
<div id="apDiv9"><a href="page.php?page=introduction"><img src="img/left_menu/introduction.png" border="0" /></a></div>
<div id="apDiv10"><a href="page.php?page=hair_services"><img src="img/left_menu/hair_services.png" border="0" /></a></div>
<div id="apDiv11"><a href="page.php?page=nail_services"><img src="img/left_menu/nail_services.png" border="0" /></a></div>
<div id="apDiv12"><a href="page.php?page=body_treatments"><img src="img/left_menu/body_treatments.png" border="0"></a></div>
<div id="apDiv13"><a href="page.php?page=specialties"><img src="img/left_menu/specialties.png" border="0" /></a></div>
<div id="apDiv14"><a href="page.php?page=massage"><img src="img/left_menu/massage.png" border="0" /></a></div>
<div id="apDiv15"><a href="page.php?page=packages"><img src="img/left_menu/packages.png" border="0" /></a></div>
<div id="apDiv16"><a href="page.php?page=facials"><img src="img/left_menu/facials.png" border="0" /></a></div>
<div id="apDiv17"><a href="page.php?page=extras"><img src="img/left_menu/extras.png" border="0" /></a></div>
<!-- END OF LINKS -->

<!-- RIGHT MENU BEGINS -->
<div id="apDiv18"><img src="img/right_menu/info.png" /></div>
<div id="apDiv19"><a href="page.php?page=price_list"><img src="img/right_menu/price_lists.png" border="0" /></a></div>
<div id="apDiv20"><a href="page.php?page=gift_certificate"><img src="img/right_menu/gift_cert.png" border="0" /></a></div>
<div id="apDiv21"><a href="page.php?page=meet_the_team"><img src="img/right_menu/meet_the_team.png" border="0" /></a></div>
<div id="apDiv22"><a href="page.php?page=news_reviews"><img src="img/right_menu/news_reviews.png" border="0" /></a></div>
<div id="apDiv23"><a href="page.php?page=employment"><img src="img/right_menu/employment.png" border="0" /></a></div>
<div id="apDiv24"><a href="page.php?page=galleries"><img src="img/right_menu/galleries.png" border="0" /></a></div>
<div id="apDiv25"><a href="page.php?page=products"><img src="img/right_menu/products.png" border="0" /></a></div>
<div id="apDiv26"><a href="page.php?page=spa_price_list"><img src="img/right_menu/spa_price_lists.png" border="0" /></a></div>
<div id="apDiv27"><a href="page.php?page=contact"><img src="img/right_menu/phone_number.png" border="0" /></a></div>

<!-- BEGIN CENTER TEXT -->
<div id="apDiv28">
    <div id="gallery">
     <?PHP 
$title = IMGDIR;
$title = str_replace("/","&nbsp;",$title);
echo $title; ?>
        
     <a href="<?=WEBIMGDIR;?><?=$curr;?>" rel="lightbox"><?PHP echo getSortedImageByIdx( 0 ); ?><img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" width="448" height="350"/></a>
        <p>Click on the Image to get a better view! or Click <a href="<?=WEBIMGDIR;?><?=$curr;?>" rel="lightbox">Here!</a></p>
     <div class="pn">
         <a href="?img=<?=$first;?>">First</a> | <a href="?img=<?=$prev;?>" class="sp">Previous</a><a href="?img=<?=$next;?>">Next</a> | <a href="?img=<?=$last;?>">Last</a>
        </div>
    </div>
<!-- END CENTER TEXT -->
</div>
</div>
</body>
</html>



What I am looking for in help is to be able to get it to show the images in order

Here it is working
http://agreatescape.org/birthday.php?
if you click the image lightbox will pop up but if you look at the image url it will go from 1.png to 58.png etc..

I have looked and looked and tried for hours and cant seem to get my head around it..

Thank you in advance