A simple photo gallery

Portal Home > Knowledgebase > Industry Announcements > Web Hosting Main Forums > A simple photo gallery

Posted by 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.

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); } ?>

Posted by jetson, 09-11-2005, 03:03 PM
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); } ?>

Posted by orongo, 02-13-2006, 02:14 PM
Did you have a url example where i can see the result?

Thanks
Posted by n3tu, 09-05-2006, 02:34 AM
try hotscripts.com, have many free photo gallerys.
Posted by pickatutorial, 01-31-2007, 11:47 AM
An output URL would have been very useful!
Posted by Evolver, 02-13-2007, 02:44 AM
If its for one person try Plogger or Jalbum
Posted by ostudioo, 03-25-2007, 07:38 PM
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?
Posted by blubox, 04-28-2007, 06:10 PM
wow! Thanks. I needed this.

-blubox
Posted by euro-space, 04-11-2008, 04:10 AM
Other photo gallery URL - easypic.webservice.ge
Posted by bizcredit, 05-07-2008, 02:15 AM
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?
Posted by euro-space, 05-07-2008, 02:36 AM
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
Posted by HRS-AL, 05-08-2008, 09:17 AM
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.
Posted by Padrone, 05-19-2008, 11:43 AM
Very nice tutorial. Thank you
Posted by scurrminator, 08-04-2009, 03:18 PM
you rock man
Posted by bizwhiz, 09-03-2013, 10:38 PM
its awesome
Posted by Hanna Kemenitz, 10-10-2013, 02:35 PM
I get this request from some of my customers.
Looks simple enough. Going to try it out.
Posted by cubicle, 11-28-2013, 01:18 PM
Looking over the code, it doesn't seem half bad. Thanks, I may implement this into my online design shop.