PHP - Simple Image Gallery Reading From Directory - Random / Numerical 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

The code below works well and shows all the images in a folder in reverse chronological order. But I want to limit it to a certain number of images .   This would enable me to have several pages of images.

So the first page would display the latest 50 images, the second page would show 50-100, and the third, 100-150.

Any helps on how to modify? I can create the pages manually. I just want to know how to limit the current page to a certain range.
Code: [Select]
<?php

//Your folder
$files = glob("images/*.*");

function sortnewestfilesfirst($a, $b) {
    return filemtime($b) - filemtime($a);
}
usort($files, "sortnewestfilesfirst");

$colCnt=0;
echo '<table border="0" style="width:1000px;">';

for ($i=0; $i<count($files); $i++)
  {
  $colCnt++;
  if ($colCnt==1)
  echo '<tr>';
  echo '<td width="20%" style="font-size:8.5px; font-family:arial">';

  $num = $files[$i];
   
echo ' 
  <div class="ImgBorder">
   <div class="clipout">
    <div class="clipin"> <a href="' . $num . '" rel="lightbox[all]"><img class="thumb ImgBorder" src="'.$num.'">  
</a> </div>
   </div></div>'."&nbsp;&nbsp;";


  echo '</td>';

  if ($colCnt==6)
    {
    echo '</tr>';
    $colCnt=0;
    }
  }

echo '</table>';
?>

My images generator comprises an array of image names extracted form an images table from a database using a select statement a random number generator, and a string that builds the correct pathname for the selected file. To select one of the images for display, i generate a random number between 1 and the length of the array. Though the generator is working, I noticed one of the random numbers is throwing up this error: Warning: getimagesize(images/): failed to open stream: No such file or directory in An inspection of the array reveals 2 array elements (representing my number of images) but one array element is NULL ( the first entry in the banner table   image_generator.php

require_once('connection.inc.php');
    $sql = 'SELECT `filename` FROM  banner';
    $result = $mysqli->query($sql, MYSQLI_STORE_RESULT) or die(mysqli_error());
    $row = $result->fetch_array(MYSQLI_ASSOC);//an array of image names
    $count = $result->num_rows;
    for ($i = 1; $i <= $count; ++$i) 
    {
       $row[$i] = $result->fetch_array(MYSQLI_ASSOC);
    }
    $i = rand(1, $count); //a random number generator,
       //The random number is used in the final line to build the correct pathname for the selected file.
       $selectedImage = "images/{$row[$i]['filename']}"; 
      if (file_exists($selectedImage) && is_readable($selectedImage)) 
      {
        $imageSize = getimagesize($selectedImage);
      }

var_dump($row)

array (size=1)
    'filename' => string 'ginsomin2.jpg' (length=13)
    null

RANDON IMAGE DISPLAY

require_once 'image_generator.php';
<div id="banner" class="wrapper clearfix">
      <img src="<?php echo $selectedImage; ?>" alt="banner">
   </div>

Kindly advice how i may proceed from here? Thanks.

I have a directory full of pictures that I would like to display in a gallery.

Originally I was going to write HTML like this...

	<li>
	    <img src=/photos/img_001.jpg">
	</li>
	

And then simply copy and paste that for the number of photos I have, and then tweak the code to: img_002.jpg, img_003.jpg, and so on.

I guess that is silly considering that I have over 500 photos to display!

How could I use PHP to go to my /photos/ directory, scan all of the files in that directory, and then grab the file name so I could automate this process?

Sorry, but I haven't written PHP in several years so all of this escapes me!  ☹️

hey guys im tyring to read my directory (whole of the web server)...i want to be able to put the file name and root into an array...im just wanting to know whats the best function i need to do this please?...thank you