jetson
09-11-2005, 02:44 PM
I hope that someone finds this useful, not just by copy/pasting and using it, but by exploring the techniques used in making it work to learn.
I have this zipped with sample images if (< 20k) if you would like it PM me your email.
I appreciate your comments, suggesstions, improvements etc.
<?
/*
Photo Gallery in a really short amount of time
written and tested with PHP 5.0.4/ Apache2, RHE3 WS
Demonstrates some basic techniques that can be used to create a simple photo gallery
possible enhancements:
support dynamic generation of thumbnails through a graphics library like gd or imagemagick
provided for learning purposes only, use at your own risk
*/
// configurations
//directory where large version images are kept
$image_directory = 'images/';
//directory where thumbs are kept
$thumb_directory = 'images/';
//prefix for large images, if any
$image_prefix = '';
//prefix for thumbnail images
// can leave empty or '' if in different folder with same names as larger versions etc
$thumb_prefix = 't_';
//the number of thumbnails display per row
$images_per_row = 5;
//start of script
//start by loading thumbnails
$thumbs = glob($thumb_directory. "$thumb_prefix*");
// make sure we have found some thumbnails
if((!is_array($thumbs)) || (!sizeof($thumbs)))
die('There are no images');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Simple Photo Gallery</title>
<style type="text/css">
body { background: #EEE; margin: 10px; }
.outline { background: #FFF; border: solid 1px #DDD; }
div { font-family: verdana, arial, sans-serif; font-size: 11px; color: #000; line-height: 17px; }
</style>
<script language="javascript" type="text/javascript">
function openimg(url,width,height,scroll)
{
if(!scroll)
scroll = 0;
if(!url)
return false;
var x = (screen.width) ? (screen.width - width)/2 : 0;
var y = (screen.height) ? (screen.height - height)/2 : 0;
var win = window.open(url, 'newino_'+ Math.round(100*Math.random()), 'width='+ width+ ',height='+ height+ ',left='+ x+ ',top='+ y+ ',toolbars=0,statusbar=0,scrollbars='+ scroll+ ',resizable=1');
return false;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="750" align="center" class="outline">
<tr><td align="left" valign="top">
<table cellspacing="0" cellpadding="5" border="0" width="750">
<tr>
<?
// the number of rows we have
$rowcount = 1;
//the total number of images displayed
$imgcount = 1;
// total number of images
$numimages = sizeof($thumbs);
// do the deed
foreach($thumbs as $v)
{
// url/path for full size image
$full_image = str_replace($thumb_prefix, $image_prefix, $v);
// thumb properties using our extended getimagesizex
$thumb_properties = getimagesizex($v);
// image properties using our extended getimagesizex
$image_properties = getimagesizex($full_image);
// if we cant get the image properties skip it
if((!$thumb_properties) || (!$image_properties)) continue;
// file size etc description for image
$desc = sprintf("%s (%sk)", basename($full_image), $image_properties['size']);
print('<td align="center" valign="middle"><div>');
printf("<a href=\"%s\" onclick=\"openimg(this.href, %u, %u, 1); return false;\"><img src=\"%s\" %s border=\"0\"></a></div><div align=\"center\">%s</div></td>\n\t\t", $full_image, $image_properties['width'], $image_properties['height'], $v, $thumb_properties['attr'], $desc);
// if we are displaying $image_per_row on this row, start a new row
if(($imgcount % $images_per_row) == 0)
{
// but only if its not the last row
if($imgcount % $numimages)
{
print("</tr><tr>\n\t\t");
}
$rowcount++;
}
$imgcount++;
}
// make table columns even if the total number of images is not even compared to the number of image per row
if($imgcount % sizeof($images))
{
$offset = ($rowcount * $images_per_row) - $numimages;
for($i = 0; $i < $offset; $i++)
{
print('<td align="center" valign="middle"> </td>'. "\n\t\t");
}
}
?>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
<?
// our extended getimagesizex function
// adding additional information for images and putting an associative key for
// the regular getimagesize integer keys
function getimagesizex($image)
{
if(file_exists($image) && is_readable($image))
{
$size = getimagesize($image);
if(!is_array($size) && sizeof($size))
return(false);
$result = array(
'width' => $size[0],
'height' => $size[1],
'type' => $size[2],
'attr' => $size[3],
'bits' => $size['bits'],
'channels' => $size['channels'],
'mime' => $size['mime'],
'size' => sprintf("%.2f", filesize($image) / 1024),
);
return($result);
}
return(false);
}
?>
I have this zipped with sample images if (< 20k) if you would like it PM me your email.
I appreciate your comments, suggesstions, improvements etc.
<?
/*
Photo Gallery in a really short amount of time
written and tested with PHP 5.0.4/ Apache2, RHE3 WS
Demonstrates some basic techniques that can be used to create a simple photo gallery
possible enhancements:
support dynamic generation of thumbnails through a graphics library like gd or imagemagick
provided for learning purposes only, use at your own risk
*/
// configurations
//directory where large version images are kept
$image_directory = 'images/';
//directory where thumbs are kept
$thumb_directory = 'images/';
//prefix for large images, if any
$image_prefix = '';
//prefix for thumbnail images
// can leave empty or '' if in different folder with same names as larger versions etc
$thumb_prefix = 't_';
//the number of thumbnails display per row
$images_per_row = 5;
//start of script
//start by loading thumbnails
$thumbs = glob($thumb_directory. "$thumb_prefix*");
// make sure we have found some thumbnails
if((!is_array($thumbs)) || (!sizeof($thumbs)))
die('There are no images');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Simple Photo Gallery</title>
<style type="text/css">
body { background: #EEE; margin: 10px; }
.outline { background: #FFF; border: solid 1px #DDD; }
div { font-family: verdana, arial, sans-serif; font-size: 11px; color: #000; line-height: 17px; }
</style>
<script language="javascript" type="text/javascript">
function openimg(url,width,height,scroll)
{
if(!scroll)
scroll = 0;
if(!url)
return false;
var x = (screen.width) ? (screen.width - width)/2 : 0;
var y = (screen.height) ? (screen.height - height)/2 : 0;
var win = window.open(url, 'newino_'+ Math.round(100*Math.random()), 'width='+ width+ ',height='+ height+ ',left='+ x+ ',top='+ y+ ',toolbars=0,statusbar=0,scrollbars='+ scroll+ ',resizable=1');
return false;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="750" align="center" class="outline">
<tr><td align="left" valign="top">
<table cellspacing="0" cellpadding="5" border="0" width="750">
<tr>
<?
// the number of rows we have
$rowcount = 1;
//the total number of images displayed
$imgcount = 1;
// total number of images
$numimages = sizeof($thumbs);
// do the deed
foreach($thumbs as $v)
{
// url/path for full size image
$full_image = str_replace($thumb_prefix, $image_prefix, $v);
// thumb properties using our extended getimagesizex
$thumb_properties = getimagesizex($v);
// image properties using our extended getimagesizex
$image_properties = getimagesizex($full_image);
// if we cant get the image properties skip it
if((!$thumb_properties) || (!$image_properties)) continue;
// file size etc description for image
$desc = sprintf("%s (%sk)", basename($full_image), $image_properties['size']);
print('<td align="center" valign="middle"><div>');
printf("<a href=\"%s\" onclick=\"openimg(this.href, %u, %u, 1); return false;\"><img src=\"%s\" %s border=\"0\"></a></div><div align=\"center\">%s</div></td>\n\t\t", $full_image, $image_properties['width'], $image_properties['height'], $v, $thumb_properties['attr'], $desc);
// if we are displaying $image_per_row on this row, start a new row
if(($imgcount % $images_per_row) == 0)
{
// but only if its not the last row
if($imgcount % $numimages)
{
print("</tr><tr>\n\t\t");
}
$rowcount++;
}
$imgcount++;
}
// make table columns even if the total number of images is not even compared to the number of image per row
if($imgcount % sizeof($images))
{
$offset = ($rowcount * $images_per_row) - $numimages;
for($i = 0; $i < $offset; $i++)
{
print('<td align="center" valign="middle"> </td>'. "\n\t\t");
}
}
?>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
<?
// our extended getimagesizex function
// adding additional information for images and putting an associative key for
// the regular getimagesize integer keys
function getimagesizex($image)
{
if(file_exists($image) && is_readable($image))
{
$size = getimagesize($image);
if(!is_array($size) && sizeof($size))
return(false);
$result = array(
'width' => $size[0],
'height' => $size[1],
'type' => $size[2],
'attr' => $size[3],
'bits' => $size['bits'],
'channels' => $size['channels'],
'mime' => $size['mime'],
'size' => sprintf("%.2f", filesize($image) / 1024),
);
return($result);
}
return(false);
}
?>