Results 1 to 17 of 17
  1. #1
    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">&nbsp;</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);
    }

    ?>
    Attached Files Attached Files

  2. #2
    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">&nbsp;</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);
    }

    ?>
    Attached Files Attached Files

  3. #3
    Join Date
    May 2003
    Location
    Montréal
    Posts
    86

    url example

    Did you have a url example where i can see the result?

    Thanks
    www.orongo.com
    Spanish hosting Blog

  4. #4
    try hotscripts.com, have many free photo gallerys.

  5. #5

    Question

    An output URL would have been very useful!

  6. #6
    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

  7. #7
    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?

  8. #8
    wow! Thanks. I needed this.

    -blubox

  9. #9
    Join Date
    Mar 2008
    Location
    Sweden
    Posts
    12
    Other photo gallery URL - easypic.webservice.ge

  10. #10
    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?

  11. #11
    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

  12. #12
    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.

  13. #13
    Join Date
    Nov 2007
    Location
    England
    Posts
    13
    Very nice tutorial. Thank you

  14. #14
    you rock man

  15. #15
    its awesome

  16. #16
    I get this request from some of my customers.
    Looks simple enough. Going to try it out.

  17. #17
    Looking over the code, it doesn't seem half bad. Thanks, I may implement this into my online design shop.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •