Sort Thumbnail display.

[pearjam]

Hi all 

 

Let me start by saying I'm a noob - who is trying to sort (order) the displayed thumbnails from the script below.

 

I've read the sort, explode, scandir and array manuals - but every attempt fails. I've been reading for days.. and still nothing.

 

I got the script from the net.. While researching how to make this work, I found someone else using the same script needing help on your forums...  (http://www.phpfreaks.com/forums/index.php/topic,299137.0.html)

 

I've changed mine a little to work with the directories, and added Javascript for displaying the clicked thumb, in place.

 

The entire thing works like a charm, and displays the generated thumbs and so on - its just that when it comes out on the page, it's in a random order like 2.jpg, 3.jpg, 1.jpg. (It always seems to display the first photo last.)

 

I'd like it to display 1.jpg, 2.jpg, 3.jpg so they appear in order on the page. This way I can group black and white photos from color photos in the same category, or show photos in the order they happened on a vacation for instance.

 

Thanks in advance for any insight!

 

 

<?php

$columns = 5;

$thmb_width = 120;

$thmb_height = 80;


function resizeImage($originalImage,$toWidth,$toHeight){

list($width, $height) = getimagesize($originalImage);

$xscale=$width/$toWidth;

$yscale=$height/$toHeight;

if ($yscale>$xscale){

$new_width = round($width * (1/$yscale));

$new_height = round($height * (1/$yscale));

} else {

$new_width = round($width * (1/$xscale));

$new_height = round($height * (1/$xscale)); }

$imageResized = imagecreatetruecolor($new_width, $new_height);

$imageTmp = imagecreatefromjpeg ($originalImage);

imagecopyresampled($imageResized, $imageTmp, 0, 0, 0, 0,

$new_width, $new_height, $width, $height);

return $imageResized; }


function generateThumbnails(){

global $thmb_width,$thmb_height;

if ($handle = opendir("/full/path/to/images/galleryname/")) {

while ($file = readdir($handle))  {

if (is_file($file)){

if (strpos($file,'_th.jpg')){

$isThumb = true;

} else {

$isThumb = false; }

if (!$isThumb) {

$dirName  = substr($file,0,strpos($file,basename($file)));

if (strlen($dirName) < 1) $dirName = '.';

$fileName = basename($file);

$fileMain = substr($fileName,0,strrpos($fileName,'.'));

$extName  = substr($fileName,strrpos($fileName,'.'),

strlen($fileName)-strrpos($fileName,'.'));

if (($extName == '.jpg') || ($extName == '.jpeg')){

$thmbFile = $dirName.'/'.$fileMain.'_th.jpg';

if (!file_exists($thmbFile)){

imagejpeg(resizeImage($file,$thmb_width,$thmb_height)

,$thmbFile,80); }}}}}}}


function getNormalImage($file){

$base = substr($file,0,strrpos($file,'_th.jpg'));

if (file_exists($base.'.jpg')) return $base.'.jpg';

elseif (file_exists($base.'.jpeg')) return $base.'.jpeg';

else return ""; }


function displayPhotos(){

global $columns;

generateThumbnails();

$act = 0;

$img_dir = 'images/galleryname/';

if ($handle = opendir($img_dir)) {

while ($file = readdir($handle)) {

if (strpos($file,'_th.jpg')){

++$act;

if ($act > $columns) {

echo '<li><a onclick="return showPic(this)" href="'.getNormalImage($img_dir.$file).'"><img src="'.$img_dir.$file.'" alt="'.$file.'"/></a></li>';
}}}}}

?>


<script type="text/javascript" language="javascript">

function showPic (whichpic) {

if (document.getElementById) {

document.getElementById('placeholder')

.src = whichpic.href;

if (whichpic.title) {

document.getElementById('desc')

.childNodes[0].nodeValue = whichpic.title;

} else {

document.getElementById('desc')

.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; }

return false;

} else {

return true; } }</script>


<div class="galthumbs"><ul>

<?php displayPhotos(); ?>

</ul></div>



<div class="galmain"><img id="placeholder" src="images/galleryname/1.jpg" alt="" /></div><p id="desc"> </p>

[ngreenwood6]

I cleaned up your code and added the sort() function to the images. I had to put the files into an array and then loop through the array to add the images after they were sorted. Please let me know how it works:

 

<?php

$columns = 5;
$thmb_width = 120;
$thmb_height = 80;


function resizeImage($originalImage,$toWidth,$toHeight){
list($width, $height) = getimagesize($originalImage);
$xscale=$width/$toWidth;
$yscale=$height/$toHeight;

if ($yscale>$xscale){
	$new_width = round($width * (1/$yscale));
	$new_height = round($height * (1/$yscale));
} else {	
	$new_width = round($width * (1/$xscale));
	$new_height = round($height * (1/$xscale)); 
}

$imageResized = imagecreatetruecolor($new_width, $new_height);
$imageTmp = imagecreatefromjpeg ($originalImage);
imagecopyresampled($imageResized, $imageTmp, 0, 0, 0, 0,
$new_width, $new_height, $width, $height);

return $imageResized; 
}


function generateThumbnails(){
global $thmb_width,$thmb_height;

if ($handle = opendir("/full/path/to/images/galleryname/")) {
	while ($file = readdir($handle))  {
		if (is_file($file)){
				if (strpos($file,'_th.jpg')){
					$isThumb = true;
				} else {
					$isThumb = false;
				}
			if (!$isThumb) {
				$dirName  = substr($file,0,strpos($file,basename($file)));

				if (strlen($dirName) < 1) $dirName = '.';

				$fileName = basename($file);
				$fileMain = substr($fileName,0,strrpos($fileName,'.'));
				$extName  = substr($fileName,strrpos($fileName,'.'),
				strlen($fileName)-strrpos($fileName,'.'));

				if (($extName == '.jpg') || ($extName == '.jpeg')){
					$thmbFile = $dirName.'/'.$fileMain.'_th.jpg';
					if (!file_exists($thmbFile)){
						imagejpeg(resizeImage($file,$thmb_width,$thmb_height),$thmbFile,80);
					}
				}
			}
		}
	}
}
}


function getNormalImage($file){
$base = substr($file,0,strrpos($file,'_th.jpg'));

if (file_exists($base.'.jpg')) return $base.'.jpg';
elseif (file_exists($base.'.jpeg')) return $base.'.jpeg';
else return ""; 
}


function displayPhotos(){
global $columns;

generateThumbnails();

$act = 0;
$img_dir = 'images/galleryname/';

$images = array();
if ($handle = opendir($img_dir)) {
	while ($file = readdir($handle)) {
		if (strpos($file,'_th.jpg')){
			++$act;

			if ($act > $columns) {
				$images[] = $file;
			}
		}
	}
}

if(is_array($images)){
	sort($images);
	foreach($images as $image){
		echo '<li><a onclick="return showPic(this)" href="'.getNormalImage($img_dir.$image).'"><img src="'.$img_dir.$image.'" alt="'.$image.'"/></a></li>';
	}
}
}

?>

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
	document.getElementById('placeholder').src = whichpic.href;

	if (whichpic.title) {
		document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
	} else {
		document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
	}

	return false;
} else {
	return true; 
} 
}
</script>

<div class="galthumbs">
<ul>
	<?php displayPhotos(); ?>
</ul>
</div>
<div class="galmain"><img id="placeholder" src="images/galleryname/1.jpg" alt="" /></div>
<p id="desc"> </p>

[pearjam]

Hey ngreenwood6 - it works!!

 

It works with both a.jpg b.jpg c.jpg and 1.jpg 2.jpg 3.jpg.. 

 

I have to say - this is the first time I posted on this forum, and I'm glad I did. I'm still learning, and am going to attempt to build a simple CMS - so I will likely be back. 

 

I have to ask ngreenwood6, in the code snippet below the fixed code - did I post in the wrong forum, or not use correct tags? (Or do you mean comments?)

 

Other than that - this can be closed as resolved! Thank you again!!

[ngreenwood6]

I think that you are referring to my signatured. That was not directed at you its just my signature that goes on all my posts.