Gallery reading from directory Random placement

jkewlo · November 9, 2010

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("/"," ",$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

mdewyer · November 9, 2010

You might want to try using PHP's sort function (http://php.net/manual/en/function.sort.php) on the image array when it's created. Try putting

sort($this->files_arr);

right before the line

$_SESSION['imgarr'] = $this->files_arr;

Check out the "sort flags" parameter for the sort function if it's not quite sorting the way you'd like. Not sure if it'll work or not.

Also, it looks like the gallery saves the file array to a session variable, so you'll probably have to clear your session to see the changes. That, or add the sorting to the code a few lines above that pulls from the session.

MadTechie · November 9, 2010

mdewyer idea but i would use

natsort

sort($this->files_arr);
Array

(

[3] => img1.png

[1] => img10.png

[0] => img12.png

[2] => img2.png

)

natsort($this->files_arr);

Array

(

[3] => img1.png

[2] => img2.png

[1] => img10.png

[0] => img12.png

)

EDIT:

Infact your using keys

$this->files_arr[$curr - 1]

So this maybe quicker

natsort($this->files_arr); //Sort
$this->files_arr= array_values($this->files_arr);//re-index

jkewlo · November 9, 2010

mdewyer idea but i would use
natsort
sort($this->files_arr);
Array

(

[3] => img1.png

[1] => img10.png

[0] => img12.png

[2] => img2.png

)

natsort($this->files_arr);

Array

(

[3] => img1.png

[2] => img2.png

[1] => img10.png

[0] => img12.png

)

Infact your using keys
$this->files_arr[$curr - 1]
So this maybe quicker

natsort(array_values($this->files_arr));

Well I dont want to have to go threw and add all the images likes that, if that was the case I would use lightbox groups.

jkewlo · November 9, 2010

Ok, it seems like it is reading the images by numeric but it seems like it is being sorted by size of the image on my server.

so it is doing like

1.png, 10.png, 11.png. They do not seem to want to go in a numeric order.

BlueSkyIS · November 9, 2010

natsort (as previously posted)

MadTechie · November 9, 2010

Well I dont want to have to go threw and add all the images likes that, if that was the case I would use lightbox groups.

I was quoting the difference between sort and natsort!

jkewlo · November 9, 2010

It, is back to reading image 19.png as the first image with natsort

MadTechie · November 9, 2010

EDIT:

and you give us a list of names you have

jkewlo · November 9, 2010

Ok, so it took me pretty much back to square 1. with natsort

MadTechie · November 9, 2010

no natsort does the same as sort (except sort re-indexs the keys).. and as your script loops through your array via the keys ie 0,1,2,3,4....

the natsort seams to have no effect ... so i added a line to "re-index" them after

natsort($this->files_arr); //Sort
$this->files_arr= array_values($this->files_arr);//re-index

jkewlo · November 9, 2010

I dont see why I am hacing such a challenge with this :shrug:

MadTechie · November 9, 2010

Still having problems ?

jkewlo · November 9, 2010

Ok I got it, I did not see

$this->files_arr= array_values($this->files_arr);//re-index

in your post. Topic Solved

MadTechie · November 9, 2010

Ahhhh!

and you have learnt some new

(the hard way)

jkewlo · November 9, 2010

Ahhhh!

and you have learnt some new

(the hard way)

^^ what do them little words says ^_^

Sign In

Gallery reading from directory *Random placement*

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information

Gallery reading from directory Random placement