Results 1 to 17 of 17
Thread: A simple photo gallery
-
09-11-2005, 02:44 PM #1Junior Guru Wannabe
- Join Date
- Sep 2005
- Posts
- 61
A simple photo gallery
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.
PHP Code:
<?
/*
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);
}
?>
-
09-11-2005, 03:03 PM #2Junior Guru Wannabe
- Join Date
- Sep 2005
- Posts
- 61
unable to edit my first one -lol
use this version
PHP Code:<?
/*
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);
}
?>
-
02-13-2006, 02:14 PM #3Junior Guru Wannabe
- Join Date
- May 2003
- Location
- Montréal
- Posts
- 86
url example
Did you have a url example where i can see the result?
Thankswww.orongo.com
Spanish hosting Blog
-
09-05-2006, 02:34 AM #4Newbie
- Join Date
- Sep 2006
- Posts
- 6
try hotscripts.com, have many free photo gallerys.
-
01-31-2007, 11:47 AM #5New Member
- Join Date
- Jan 2007
- Posts
- 2
An output URL would have been very useful!
-
02-13-2007, 02:44 AM #6Web Hosting Master
- Join Date
- Oct 2005
- Location
- Surrey BC
- Posts
- 1,343
If its for one person try Plogger or Jalbum
+ NOW WE'RE MAKING RECORDS, NOW WE'RE MAKING TAPES
-
03-25-2007, 07:38 PM #7Newbie
- Join Date
- Mar 2007
- Posts
- 17
Indeed an outcome url would be a little more help. You can see what this code does or what that one does and etc. Did anyone use it and was successful?
-
04-28-2007, 06:10 PM #8Newbie
- Join Date
- Apr 2007
- Posts
- 8
wow! Thanks. I needed this.
-blubox
-
04-11-2008, 04:10 AM #9Temporarily Suspended
- Join Date
- Mar 2008
- Location
- Sweden
- Posts
- 12
Other photo gallery URL - easypic.webservice.ge
-
05-07-2008, 02:15 AM #10Junior Guru Wannabe
- Join Date
- May 2008
- Posts
- 50
I am going to implement it straight a way. I like it can you suggest me photo gallery which is having one photos at a time and refresh it automatically to second one?
-
05-07-2008, 02:36 AM #11Temporarily Suspended
- Join Date
- Mar 2008
- Location
- Sweden
- Posts
- 12
Hello, this gallery has not refresh functions.
But if you like it you can signup for hosting account with us and we will install it FREE for you.
here is link to GOLDEN Hosting plan which includes this gallery script - http://www.euro-space.net/order.php?..._Signup&Step=1
-
05-08-2008, 09:17 AM #12Newbie
- Join Date
- Mar 2005
- Location
- Toronto
- Posts
- 25
I've used a simple gallery called: singapore-0.10.1
I believe you can have the images auto-refresh however I like it most for th clean look and easy-of-use.
-
05-19-2008, 11:43 AM #13Newbie
- Join Date
- Nov 2007
- Location
- England
- Posts
- 13
Very nice tutorial. Thank you
-
08-04-2009, 03:18 PM #14Newbie
- Join Date
- Aug 2009
- Posts
- 5
you rock man
-
09-03-2013, 10:38 PM #15Newbie
- Join Date
- Aug 2013
- Posts
- 15
its awesome
-
10-10-2013, 02:35 PM #16Newbie
- Join Date
- Oct 2013
- Posts
- 10
I get this request from some of my customers.
Looks simple enough. Going to try it out.
-
11-28-2013, 01:18 PM #17Newbie
- Join Date
- Aug 2011
- Posts
- 12
Looking over the code, it doesn't seem half bad. Thanks, I may implement this into my online design shop.