PHP Image Gallery





26
Date Submitted Sun. Dec. 24th, 2006 7:10 PM
Revision 1 of 1
Beginner bhmahler
Tags HTML | JavaScript | PHP
Comments 4 comments
This is a PHP and JavaScript Image gallery that I created. There are 2 uses for this.
1.) You can save it as index.php and place in a folder containing images and it will display the images in that folder.
Example:
place index.php in images/folder
http://yoursite.com/images/folder/
This will display all images in that folder

2.) Pass in the path to the folder to display in the url
Example:
Save as imagegallery.php
http://yoursite.com/imagegallery.php?path=images/folde
<?
//************************************************************//
//                                                            //
//                PHP Image Gallery v2.0                          //
//                Author: Brian Mahler                        //
//                Copyright (c) 2006 Brian Mahler             //
//                                                            //
//  This script is free to use and modify to your needs as    //
//  long as this copyright notice remains in tact.            //
//                                                            //         
//************************************************************//
//
// CSS to position and change appearance
// Modify these settings to change the appearance of the page
//
?>
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>PHP Slideshow v2.0 by Brian Mahler</title>
        <style type="text/css">
            body{
                background-color:#eee;
                text-align:center;
            }
            a:link, a:active, a:visited{
                text-decoration:none;
                color: #000;   
            }
            a:hover{
                color: #bbb;   
            }
            table#images{ /* Includes PageNav,ImageNav and Image */
                margin:auto;
            }
            td#copy{
                font-family: times;
                font-size:8pt;
            }
            Table#nav{ /* Navigation table */

            }
            img#view{
                 
            }
            img.navpic{
                cursor:pointer;
            }
           
        </style>
<?
//
// Configuration Settings
//
define('IMAGE_WIDTH',480); //Width of image in pixels
define('THUMBNAIL_SIZE',60); //Width of thumbnails in pixels
define('THUMB_MAX_HEIGHT',360); //Max height of the thumbnails window in pixels
define('THUMB_COLS',4); //Sets the number of Columns to use in the thumbnails

//---------------------------------------------Do not Edit below this line----------------------------------------------
//                                          Unless you have knowledge of PHP

//Get the path to the current directory
$z = split('/', $_SERVER['SCRIPT_FILENAME']);
$thisname = $z[count($z)-1];
if (!isset($_GET['path'])){
    $path = str_replace($thisname, '', $_SERVER['SCRIPT_FILENAME']);
}else{
    $path = "./" . $_GET['path'];
}

//Define allowed file extensions
$allowed = array('jpg','gif','png');

//Read through the directory and find all files with proper file extensions
$dir = dir($path);
while ($file = $dir->read()) {
    if (($file != '.') && ($file != 'CVS') && ($file != '..')) {
        $file_size = filesize($path . $file);
        $file_extension = file_ext($file);
        if(!is_dir($path . $file) && isset($file_extension) && in_array($file_extension, $allowed)) {
            $images[] = array('name' => $file,
                              'size' => $file_size);
        }     
    }
}
?>
<script type="text/javascript">
//The array to hold all the images
var photos = new Array();
//Preload images function
function loadimages(){
<?
$count = count($images);
for($i=1;$i<=$count;$i++){
    echo 'photos[' . $i . ']= new Image()' . "\n";
    echo 'photos[' . $i . '].src="' . $images[$i-1]['name'] . '"' . "\n";
}
?>
}
//Javascript to display the images
function showit(step){
    document.images.view.src=photos[step].src
}

window.onload = loadimages();
</script>
<?

//Check for images present in the directory
if ($count < 1){
    die('<center>No images present in current directory</center>');
}
//Create the image navigation table
$image_nav = '<div style="overflow:auto;max-height:' . THUMB_MAX_HEIGHT . 'px;"><table id="nav"><tr>';
for ($x=1; $x<=$count; $x++){
     if ($x <= $count){
         $url = $images[$x -1]['name'];
         $image_nav .= '<td align="center" valign="center">';
         if ($x%THUMB_COLS==0){
            $image_nav .= '<a onclick="showit(' . $x . ')"><img class="navpic" src="' . $url . '" alt="' . $x . '" border="0" width="' . THUMBNAIL_SIZE . 'px" /></a></td></tr><tr>'    ;
        }else{
            $image_nav .= '<a onclick="showit(' . $x . ')"><img class="navpic" src="' . $url . '" alt="' . $x . '" border="0" width="' . THUMBNAIL_SIZE . 'px" /></a></td>';
        }   
    }
}
$image_nav .= '</tr></table></div>';


//The image to be shown
$image = '<img id="view" src="' . $images[0]['name'] . '" width="' . IMAGE_WIDTH . '">';
//This script is free to use and modify to your needs, I just ask that you do not remove this copyright notice
$copy = 'PHP Slideshow v2 2006 Brian Mahler';

//Display all elements
?>
<table id="images" border="0" cellpadding="2px">
    <tr><td align="left" valign="top"> <? echo $image_nav; ?></td><td id="pic" align="left" valign="top" style="padding:2px;"><? echo  $image; ?></td></tr>
    <tr><td colspan="2" id="copy" align="center"><? echo $copy; ?></td></tr>
</table>

<?
//function to get file extension of files
function file_ext($file) {
    $extension = split("[.]", $file);
    $ext_file = $extension[count($extension)-1];
    return strtolower($ext_file);
}
?>
    </body>
</html>

Brian Mahler

Comments

Comments Better file_ext?
Sun. Jan. 7th, 2007 3:00 AM    Helper brendo
Comments Updated code
Sun. Dec. 24th, 2006 8:47 PM    Beginner bhmahler
Comments Issue with navigation...
Wed. Jan. 23rd, 2008 12:16 AM    Beginner grumpycow
Comments Please Help
Sun. Feb. 11th, 2007 10:59 AM    Newbie stephenleefarmer

Voting