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++;
}
}
Related
Hi I have the following script to show images from a directory and make thumbs , but I would like to know how to sort the images from newest to oldest and how to implement it in this script
Many Thanks in Advance!
<?php
# SETTINGS
$max_width = 800;
$max_height = 600;
$per_page = 10;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
$images = array();
$times = array();
// read the images folder for jpg, jpeg, png and gif images using glob() - see http://php.net/glob for info
foreach(glob('images/*.{jpg,jpeg,png,gif}', GLOB_BRACE) as $image)
{
// add the file to the images array
$images[] = $image;
// get the files creation/last modification timestamp add it to the times array.
// This array will be used later to sort the images array
$times[] = filemtime($image);
// generate the image thumbnail if needed
if(!file_exists('thumbs/' . $image))
{
// calling your makeThumb function, pass it the file extension for the image
makeThumb(basename($image), pathinfo($image, PATHINFO_EXTENSION));
}
}
// using the times array, to sort the images newest to oldest
array_multisort($times , SORT_DESC,
$images);
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 substr($file,strlen($folder),strpos($file, '.')-strlen($folder));
}
}
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>
You can use filemtime($file); for getting the last modification date of your file. You can store your files in an array and use the timestamps as keys. You can sort the array contents by the keys with php easily and just foreach through the sorted array and output it like that. Another advice: You should store your file paths, extensions, upload/modification dates and file sizes in database, it would save much work for you. I hope my answer was helpful.
The code:
<?php
function sort_images($basedir){
$dir = scandir($basedir);
$files = array();
foreach($dir as $filename){
$mimetype = mime_content_type($filename);
if(explode('/', $mimetype)[0] == 'image'){
$mod_time = filemtime(basedir.'/'.$filename;
$files[$mod_time] = $basedir.'/'.$filename;
}
}
$sorted = ksort($files);
return $sorted;
}
?>
<!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>
</head>
<body>
<?php foreach(sort_images('foo/bar') as $image): ?>
<div class="image"><img src="<?php echo $image; ?>" />
<?php endforeach; ?>
</body>
</html>
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);
}
?>
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>';
}
}