I'm new to php and I'm trying to figure out how to sort images by exif creation date. The code below is the one from this tutorial I followed: Simple Php Gallery Pagination
I just modified a little bit to retrieve exif data
I'm looking for a method without database, the goal is to have a paginated gallery (and now it is paginated) sorted with newest first
function getPictures() {
global $page, $per_page, $has_previous, $has_next, $DirFoto, $DirThumb;
if ( $handle = opendir($DirFoto) ) {
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$exif = exif_read_data("$DirFoto/$file", 0, true);
if ( ! is_dir($DirThumb) ) {
mkdir($DirThumb);
}
if ( ! file_exists($DirThumb.'/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$DirFoto.'/'.$file.'" title="Photo taken on '.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'">';
echo '<img src="'.$DirThumb.'/'.$file.'" alt="'.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'"/>';
echo '</a></li>';
$count++;
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
I rationalized a bit the whole code, and this is my result:
$ScriptsHead = '
<link type="text/css" media="screen" rel="stylesheet" href="./stile.css"/>
<link type="text/css" rel="stylesheet" href="./js/photoswipe.css"/>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/klass.min.js"></script>
<script type="text/javascript" src="./js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="./js/miophotoswipe.js"></script>
';
function getPictures() {
global $page, $per_page, $has_previous, $has_next, $DirFoto, $DirThumb;
if ( $handle = opendir($DirFoto) ) {
$skip = $page * $per_page;
$images = array(); # empty data structure
while(($file = readdir($handle)) !== false ) {
if($file == '..' || $file == '.' || is_dir($file) || getPictureType($file) == '')
continue;
# only for images
$exif = exif_read_data("$DirFoto/$file", 0, true);
$date = $exif['IFD0']['DateTime']; # everything you like to be ordered
$images[$file] = $date; # associate each file to its date
}
asort($images); # sort the structure by date
echo '<ul id="pictures">';
if ( $skip != 0 )
$has_previous = true;
$count = -1;
foreach ($images as $file => $fileDate) {
$count ++;
if($count < $skip)
continue;
if($count >= $skip + $per_page) {
$has_next = true;
break;
}
if ( ! is_dir($DirThumb) ) {
mkdir($DirThumb);
}
if ( ! file_exists($DirThumb.'/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$DirFoto.'/'.$file.'" title="Photo taken on '.date("F d Y, H:i:s", strtotime($fileDate)).'">';
echo '<img src="'.$DirThumb.'/'.$file.'" alt="'.date("F d Y, H:i:s", strtotime($fileDate)).'"/>';
echo '</a></li>';
}
echo '</ul>';
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height, $DirFoto, $DirThumb;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($DirFoto.'/'.$file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($DirFoto.'/'.$file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($DirFoto.'/'.$file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, $DirThumb.'/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, $DirThumb.'/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, $DirThumb.'/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
/* echo phpinfo(); */
?>
Since the code reads through the directory and outputs HTML as it goes, you will have to change it up a bit to do what you want. I suggest first reading the filenames into an array and call exif_read_data for each file read.
If you key the array by the filename and the value of the array is the exif creation date, you can then call asort() to sort the array by creation date. If a file doesn't have a valid exif creation date, perhaps you could just use the modification time of the file on the server.
Once the array is sorted in the proper order, you could change the following while loop
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
to be
while ( $count < $per_page && ($file = array_shift($sorted_files)) !== false ) {
where $sorted_files is the array of sorted files. Hope that helps, if not I can try to write up an example.
Sorry I can't try this solution right now, but it should be something like:
<?php
function getPictures() {
global $page, $per_page, $has_previous, $has_next, $DirFoto, $DirThumb;
if ( $handle = opendir($DirFoto) ) {
$images = array(); # empty data structure
while(($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
# only for images
$exif = exif_read_data("$DirFoto/$file", 0, true);
$date = $exif['IFD0']['DateTime']; # everything you like to be ordered
$images[$file] = $date; # associate each file to its date
}
}
asort($images); # sort the structure by date
echo '<ul id="pictures">';
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
$count = 0;
while ( $count < $skip && ($file = array_shift($images)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
# $count = 0;# (???)
while ( $count < $per_page && ($file = array_shift($images)) !== false ) {
$exif = exif_read_data("$DirFoto/$file", 0, true); # it could be avoided
if ( ! is_dir($DirThumb) ) {
mkdir($DirThumb);
}
if ( ! file_exists($DirThumb.'/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$DirFoto.'/'.$file.'" title="Photo taken on '.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'">';
echo '<img src="'.$DirThumb.'/'.$file.'" alt="'.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'"/>';
echo '</a></li>';
$count++;
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
?>
Please give me a feedback on that.
Cheers,
Riccardo
The code works now, if I mouseover the tooltip shows me the right date but no thumbnails or images are loaded.
In my first question I omitted the last two functions, this is my current update code:
<?php
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next, $DirFoto, $DirThumb;
if ( $handle = opendir($DirFoto) ) {
$images = array();
while(($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$exif = exif_read_data("$DirFoto/$file", 0, true);
$date = $exif['IFD0']['DateTime'];
$images[$file] = $date;
}
}
asort($images);
echo '<ul id="pictures">';
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
$count = 0;
while ( $count < $skip && ($file = array_shift($images)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
while ( $count < $per_page && ($file = array_shift($images)) !== false ) {
$exif = exif_read_data("$DirFoto/$file", 0, true);
if ( ! is_dir($DirThumb) ) {
mkdir($DirThumb);
}
if ( ! file_exists($DirThumb.'/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$DirFoto.'/'.$file.'" title="Photo taken on '.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'">';
echo '<img src="'.$DirThumb.'/'.$file.'" alt="'.date("F d Y, H:i:s", strtotime($exif['IFD0']['DateTime'])).'"/>';
echo '</a></li>';
$count++;
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($DirFoto.'/'.$file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($DirFoto.'/'.$file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($DirFoto.'/'.$file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, $DirThumb.'/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, $DirThumb.'/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, $DirThumb.'/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
Related
Hi I need some help adding the file name under each photo and make the name clickable to download the photo if possible. The file name should be the name the photo has been saved with example if the photo is 123.jpg I want the name to show as 123 and when I click on it it should save it...
<?php
# SETTINGS
$max_width = 800;
$max_height = 600;
$per_page = 10;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") ) {
$lightbox = rand();
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
// make the thumbs directory if it doesn't already exist
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
// make a thumbnail if it doesn't already exist
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
// create a link to $file, add the thumbnail
echo '<li><a href="' . $file . '">';
echo '<img src="thumbs/'.$file.'" alt="" /></a></li>';
$count++;
echo '<a href="$file">';
echo substr($file,strlen($folder),strpos($file, '.')-strlen($folder));
echo '</a>';
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
<title>Pictures</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
body {
width:780px;
margin:0 auto;
}
#pictures li {
float:left;
height:<?php echo ($max_height + 10); ?>px;
list-style:none outside;
width:<?php echo ($max_width + 10); ?>px;
text-align:center;
}
img {
border:0;
outline:none;
}
.prev {
float:left;
}
.next {
float:right;
}
</style>
</head>
<body>
<?php getPictures(); ?>
<div style="clear:both"></div>
<?php
if ( $has_previous )
echo '<p class="prev">← Previous Page</p>';
if ( $has_next )
echo '<p class="next">Next Page →</p>';
?>
<div style="clear:both"></div>
<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>
</body>
</html>
At present, the code you're using generates thumbnails for each image, but it does not create a link to the image, which is what you need to be able to click and load the pictures. There is also some extra code that looks like it is from a different script that adding unneeded html to your page.
To add a link to the images, you'll need to replace the appropriate part of your code with the following:
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
// make the thumbs directory if it doesn't already exist
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
// make a thumbnail if it doesn't already exist
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
// create a link to $file, add the thumbnail
echo '<li><a href="' . $file . '">';
echo '<img src="thumbs/'.$file.'" alt="" /></a></li>';
$count++;
}
}
I'm using the following function to read a directory and show images as a gallery, it works really well, but I need to display images ordering by date from newer to older.
Knows anyone how to do it using this method?
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir("saved/2013") ) {
$lightbox = rand();
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('saved/2013') ) {
mkdir('saved/2013');
}
$strFileName = "saved/2013/".$file;
echo '<div id="imagen-t">';
echo '<p>' .date( "D d M Y g:i A", filemtime($strFileName)) . "</p>";
echo '<p><img src=saved/2013/'.$file.' alt="" width="220" /></p>';
echo '</div>';
$count++;
}
}
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
Here is the result:
http://www.espigoplatja.com/whale/galeria/
Salutations,
Gonzalo
Have you looked at USort: http://php.net/manual/en/function.usort.php
It allows you to sort an array by values with user defined comparison function.
An example
<?php
function my_sort($a,$b)
{
if ($a==$b) return 0;
return ($a<$b)?-1:1;
}
$a=array(4,2,8,6);
usort($a,"my_sort");
$arrlength=count($a);
for($x=0;$x<$arrlength;$x++)
{
echo $a[$x];
echo "<br>";
}
?>
By the way I try implementing the sample you provide and it displays the same date for all imagenes:
# SETTINGS
$per_page = 6;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir("saved/2013") ) {
$lightbox = rand();
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
function my_sort($a,$b)
{
if ($a==$b) return 0;
return ($a<$b)?-1:1;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('saved/2013') ) {
mkdir('saved/2013');
}
$a=array($file);
usort($a,"my_sort");
//$strFileName = "saved/2013/".$file;
$strFileName = "saved/2013/".$a[$x];
echo '<div id="imagen-t">';
//echo '<p>' .date( "D d M Y g:i A", filemtime($strFileName)) . "</p>";
echo '<p>' .date( "D d M Y g:i A", filemtime($strFileName)) . "</p>";
echo '<p><img src=saved/2013/'.$file.' alt="" width="220" /></p>';
echo '</div>';
$count++;
}
}
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
i am creating a php image gallery, after a long search i found a good php image gallery code on google. when i click on thumbnail of a image it send to orignal image location, but instead of orignal image i want to send user to different page where the same image display!
here is the code!
<?php # SETTINGS
$max_width = 200;
$max_height = 200;
$per_page = 9;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") ) {
$lightbox = rand();
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '<div class="fb">view</div></a></li>';
$count++;
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = 220;
$newH = $max_height;
} else {
$newW = $max_width;
$newH = 200;
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
sorry, my english is not good, hopefully you understand my question!
This code contains a rel="lightbox['.$lightbox.'] in the image link. It is expecting to use Lightbox in the browser to display the image. Lightbox is a JavaScript library (there are lots of clones, too) that displays the image over the existing page and grays out the background. It is pretty nice. You might want to investigate using Lightbox to display the image.
Otherwise, you will need to modify the line:
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
so that the href point to the page you want with the $file as an GET value in the URL. If you do, you should take out the rel= since you won't be using it. It won't hurt anything but it is just clutter if you don't use Lightbox. For example something like:
echo '<li><a href="display.php?image='.$file.'">';
where display.php is a page to display the image.
after a long search on google i found below php code for image gallery, but it produce jquery effect after cick on thumbnail, instead of jquery i want to go to other page that shows full respective image, like a wordpress blog does!
<?php
# SETTINGS
$max_width = 200;
$max_height = 200;
$per_page = 9;
//$imagedir = 'gallery/';
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") ) {
$lightbox = rand();
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '<div class="fb">view</div></a></li>';
$count++;
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = 220;
$newH = $max_height;
} else {
$newW = $max_width;
$newH = 200;
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
Remove the rel attribute from the anchor element in the while loop outputting the images. This would prevent the Lightbox script from binding events to this link, so when users click it, they will simply be redirected to the image specified in the href attribute.
In other words, instead of
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
use
echo '<li><a href="'.$file.'">';
I have a PHP script that creates a thumbnail and lists an image gallery. The problem I'm having is that it lists it by timestamp on the server but I want it to list 'naturally'.
<?php
# SETTINGS
$max_width = 100;
$max_height = 100;
$per_page = 24;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") ) {
$lightbox = rand();
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$file.'" class="zoom" rel="group">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '</a></li>';
$count++;
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}
function getPictureType($file) {
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}
function makeThumb( $file, $type ) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
similair to hobodave but i would use php's built in natsort function:
uksort($output, "strnatcmp");
You're not even using an array.
Instead of echo'ing your li's as you encounter them you need to put them into an array, indexed by filename.
$output[$file] = '<li>etc</li>';
Then once your loop has completed, you'll need to use a custom function to do a natural key sort, since PHP's natsort() only works on values.
function natksort($array) {
$keys = array_keys($array);
natsort($keys);
$ret = array();
foreach ($keys as $k) {
$ret[$k] = $array[$k];
}
return $ret;
}
$output = natksort($output);
echo '<ul>';
foreach ($output as $out) {
echo $out;
}
echo '</ul>';
Edit
Wow, I found this little gem to do the sorting:
uksort($array, 'strnatcasecmp');
Credit: http://www.chipstips.com/?p=269
The trick was to put everything inside an array... I took the liberty of rewriting your getPictures() function... This one implements the sorting.
function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if (!is_dir('thumbs')) {
mkdir('thumbs');
}
if ($handle = opendir(".")) {
$lightbox = rand();
$files = array();
while (($file = readdir($handle)) !== false) {
if (!is_dir($file) && ($type = getPictureType($file)) != '') {
$files[] = $file;
}
}
natsort($files);
$has_previous = $skip != 0;
$has_next = (count($files) - $skip - $per_page) > 0;
$spliceLength = min($per_page, count($files) - $skip);
$files = array_slice($files, $skip, $spliceLength);
echo '<ul id="pictures">';
foreach($files as $file) {
if (!file_exists('thumbs/' . $file)) {
$type = getPictureType($file);
makeThumb($file, $type);
}
echo '<li><a href="' . $file . '" class="zoom" rel="group">';
echo '<img src="thumbs/' . $file . '" alt="" />';
echo '</a></li>';
}
echo '</ul>';
}
}