steamngn
06-12-2007, 07:17 PM
Hi all,
This is my first snippet posting, so apologies in advance if I miss something.
Here are two pieces of code that when used together make for a very simple website picture gallery:
1) If you haven't already done so, create a folder on your web server to keep all of your images in.
2) Copy the following code to a new page in your images folder and name it gallerytable.php:
<?php
$filelist = explode("\n",`find .|sort`);
$dircount = 1;
$imgcount = 0;
//start the table(ok to change the table style)
$display_block .= "<div style=\"text-align:right\">";
$display_block .= "<table style=\"width:600px\">";
$display_block .= "<tr> \n";
//for each item in the array....
for ($count=0;$count<count($filelist);$count++) {
// get the file names....
$filename = $filelist[$count];
// get the directories....
if (is_dir($filename) && (!eregi("_vti_cnf",$filename)) && (!eregi("_overlay",$filename)) && (!eregi("_derived",$filename)) && ($filename!=".") && ($filename!="..")) {
$currdir = array();
$gallery = opendir($filename);
$imgcount = 0;
$gallerytitle = $filename . "/gallery.txt";
//loop to count number of images....
while($f = readdir($gallery)){
if(($f != ".") && ($f != "..")&& (eregi("(\.jpg|\.gif|\.png)$", $f))){
//get a random image to display....
array_push($currdir,"$f");
$d = $currdir[(array_rand($currdir))];
$displayimg = sprintf($d,s);
$imgcount++;
}
}
closedir($gallery);
//If the photo folder has a file named 'gallery.txt'
//This will read the first line and stick that text
//into the "alt" of the image (displays on mouseover)
// read title of gallery from gallery.txt
if (file_exists($gallerytitle)) {
$title_file = file($gallerytitle);
$title = $title_file[0];
}
// if no gallery.txt file was found; show user through $title on webpage
else {
$title = "No description for this gallery was provided";
}
//build our table...
$display_block .= "<td><center><a href=\"galleryslideshow.php?dir=" . $filename . "\"><img src=\"" . $filename . "/" . $displayimg . "\" alt=\"" . $title . "\" width=\"275\"/><br>";
$display_block .= "There are [" . $imgcount . "] images in this directory</a></center></td>\n";
$dircount = $dircount + 1;
if ($dircount % 2) {
$display_block .= "</tr>\n<tr>\n";
} else {
$display_block .= "";
}
$imgid = 1;
}
}
//close our table when done...
$display_block .="</tr></table></div>";
//show our work!
echo $display_block;
?>
3) copy the following code into a new page in your image gallery and name it slideshow.php:
<?php
*******************************************************************************
MODIFY YOUR HTML
*******************************************************************************
You'll want to use your own markup in the "PRINT HTML" section (see below) so
that it corresponds to your site design preferences. It should be fairly simple
to figure out the variables used in the markup and their meanings:
$title = the title of the slideshow (found in title.txt; see above)
$num_pics = the total number of images in the current directory
$photos = array containing the names of the images
$image = index into photos array
$prev = the previous displayed image
$next = the next image to be displayed
also used to specify the number of the current image displayed
*******************************************************************************
CODE SECTION
******************************************************************************/
// look for picture files in current directory and add them to photos array
$dir = $_GET['dir'];
$current_dir = opendir("$dir");
while ($file = readdir($current_dir)) {
if (eregi("(\.jpg|\.gif|\.png)$", $file)) $photos[] = $file;
}
closedir($current_dir);
// check to see if images were found in directory; if no images were found,
// alert user through $title on webpage
if ($photos == null) $title = "There are no pictures in this directory! ";
// images were found; sort them
else sort($photos);
// read title of slideshow from title.txt
if (file_exists('title.txt')) {
$title_file = file('title.txt');
$title = $title.$title_file[0];
}
// no title.txt file was found; alert user through $title on webpage
else $title = $title."You did not supply a title.txt file!";
// get total number of pictures
$num_pics = count($photos);
// if image number is not specified, set it to the first image
if (empty($image)) $image = '0';
// if user is on the last image or if the image number specified is greater than
// the number of pics available in the directory, start user at first image
if (($image == $num_pics) || ($image > $num_pics)) $image = '0';
// setup the link for the next image
$next = $image + 1;
// setup the link for the previous image
if ($image == '0') $prev = $num_pics - 1;
else $prev = $image - 1;
/*******************************************************************************
PRINT HTML
******************************************************************************/
print <<< PRINT_PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="PUT_YOUR_HOME_PAGE_HERE" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="PUT_YOUR_HOME_PAGE_HERE" />
<meta name="description" content="PUT_YOUR_CONTENT_HERE" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<title>PUT_YOUR_COMPANY_NAME_HERE | Customer Installs | $title</title>
</head>
<body>
<div id="container">
<div id="photos">
<h3>$title <span class="tiny">($next of $num_pics)</span></h3>
<a href="?dir=$dir&image=$image"><img src="$dir/$photos[$image]"></a>
<br />
<p><a href="?dir=$dir&image=$prev">« prev</a> · <a href="PUT_YOUR_HOME_PAGE_HERE">NAME_YOUR_LINK_HERE</a> · <a href="?dir=$dir&image=$next">next »</a></p>
</div>
</div>
</body>
</html>
PRINT_PAGE;
?>
4) Last, create folders in your gallery folder for each set of images, and upload your pics. Then edit or include the gallerytable and slideshow code to match your website. The gallerytable.php code will search your image directory and build a nice table with an image from each folder and a link to launch slideshow.php with the correct folder of images. If you make a simple gallery.txt file for each folder, you can insert a description that will show on mouseover of the gallery images, and if you make a title.txt file in each folder you can have a picture description for each photo as well (one description per line; make sure your images are named in a way to preserve the order eg: img1,img2,etc) DON'T PUT ANY OTHER FILES IN THE ROOT IMAGE DIRECTORY THAT ARE IMAGES!
I have found that the code works very nicely if you add the gallerytable.php code to the top of my regular web page template and just move the
echo $display_block
down to the body portion, and then do the same with the slideshow.php code, only this time echo the <BODY> portion of the "PRINT HTML" section in the body.
Looks good and works quick! If you come across an issue I would love to know; certainly not posting junk on purpose!
Happy viewing!
Andy
This is my first snippet posting, so apologies in advance if I miss something.
Here are two pieces of code that when used together make for a very simple website picture gallery:
1) If you haven't already done so, create a folder on your web server to keep all of your images in.
2) Copy the following code to a new page in your images folder and name it gallerytable.php:
<?php
$filelist = explode("\n",`find .|sort`);
$dircount = 1;
$imgcount = 0;
//start the table(ok to change the table style)
$display_block .= "<div style=\"text-align:right\">";
$display_block .= "<table style=\"width:600px\">";
$display_block .= "<tr> \n";
//for each item in the array....
for ($count=0;$count<count($filelist);$count++) {
// get the file names....
$filename = $filelist[$count];
// get the directories....
if (is_dir($filename) && (!eregi("_vti_cnf",$filename)) && (!eregi("_overlay",$filename)) && (!eregi("_derived",$filename)) && ($filename!=".") && ($filename!="..")) {
$currdir = array();
$gallery = opendir($filename);
$imgcount = 0;
$gallerytitle = $filename . "/gallery.txt";
//loop to count number of images....
while($f = readdir($gallery)){
if(($f != ".") && ($f != "..")&& (eregi("(\.jpg|\.gif|\.png)$", $f))){
//get a random image to display....
array_push($currdir,"$f");
$d = $currdir[(array_rand($currdir))];
$displayimg = sprintf($d,s);
$imgcount++;
}
}
closedir($gallery);
//If the photo folder has a file named 'gallery.txt'
//This will read the first line and stick that text
//into the "alt" of the image (displays on mouseover)
// read title of gallery from gallery.txt
if (file_exists($gallerytitle)) {
$title_file = file($gallerytitle);
$title = $title_file[0];
}
// if no gallery.txt file was found; show user through $title on webpage
else {
$title = "No description for this gallery was provided";
}
//build our table...
$display_block .= "<td><center><a href=\"galleryslideshow.php?dir=" . $filename . "\"><img src=\"" . $filename . "/" . $displayimg . "\" alt=\"" . $title . "\" width=\"275\"/><br>";
$display_block .= "There are [" . $imgcount . "] images in this directory</a></center></td>\n";
$dircount = $dircount + 1;
if ($dircount % 2) {
$display_block .= "</tr>\n<tr>\n";
} else {
$display_block .= "";
}
$imgid = 1;
}
}
//close our table when done...
$display_block .="</tr></table></div>";
//show our work!
echo $display_block;
?>
3) copy the following code into a new page in your image gallery and name it slideshow.php:
<?php
*******************************************************************************
MODIFY YOUR HTML
*******************************************************************************
You'll want to use your own markup in the "PRINT HTML" section (see below) so
that it corresponds to your site design preferences. It should be fairly simple
to figure out the variables used in the markup and their meanings:
$title = the title of the slideshow (found in title.txt; see above)
$num_pics = the total number of images in the current directory
$photos = array containing the names of the images
$image = index into photos array
$prev = the previous displayed image
$next = the next image to be displayed
also used to specify the number of the current image displayed
*******************************************************************************
CODE SECTION
******************************************************************************/
// look for picture files in current directory and add them to photos array
$dir = $_GET['dir'];
$current_dir = opendir("$dir");
while ($file = readdir($current_dir)) {
if (eregi("(\.jpg|\.gif|\.png)$", $file)) $photos[] = $file;
}
closedir($current_dir);
// check to see if images were found in directory; if no images were found,
// alert user through $title on webpage
if ($photos == null) $title = "There are no pictures in this directory! ";
// images were found; sort them
else sort($photos);
// read title of slideshow from title.txt
if (file_exists('title.txt')) {
$title_file = file('title.txt');
$title = $title.$title_file[0];
}
// no title.txt file was found; alert user through $title on webpage
else $title = $title."You did not supply a title.txt file!";
// get total number of pictures
$num_pics = count($photos);
// if image number is not specified, set it to the first image
if (empty($image)) $image = '0';
// if user is on the last image or if the image number specified is greater than
// the number of pics available in the directory, start user at first image
if (($image == $num_pics) || ($image > $num_pics)) $image = '0';
// setup the link for the next image
$next = $image + 1;
// setup the link for the previous image
if ($image == '0') $prev = $num_pics - 1;
else $prev = $image - 1;
/*******************************************************************************
PRINT HTML
******************************************************************************/
print <<< PRINT_PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="PUT_YOUR_HOME_PAGE_HERE" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="PUT_YOUR_HOME_PAGE_HERE" />
<meta name="description" content="PUT_YOUR_CONTENT_HERE" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<title>PUT_YOUR_COMPANY_NAME_HERE | Customer Installs | $title</title>
</head>
<body>
<div id="container">
<div id="photos">
<h3>$title <span class="tiny">($next of $num_pics)</span></h3>
<a href="?dir=$dir&image=$image"><img src="$dir/$photos[$image]"></a>
<br />
<p><a href="?dir=$dir&image=$prev">« prev</a> · <a href="PUT_YOUR_HOME_PAGE_HERE">NAME_YOUR_LINK_HERE</a> · <a href="?dir=$dir&image=$next">next »</a></p>
</div>
</div>
</body>
</html>
PRINT_PAGE;
?>
4) Last, create folders in your gallery folder for each set of images, and upload your pics. Then edit or include the gallerytable and slideshow code to match your website. The gallerytable.php code will search your image directory and build a nice table with an image from each folder and a link to launch slideshow.php with the correct folder of images. If you make a simple gallery.txt file for each folder, you can insert a description that will show on mouseover of the gallery images, and if you make a title.txt file in each folder you can have a picture description for each photo as well (one description per line; make sure your images are named in a way to preserve the order eg: img1,img2,etc) DON'T PUT ANY OTHER FILES IN THE ROOT IMAGE DIRECTORY THAT ARE IMAGES!
I have found that the code works very nicely if you add the gallerytable.php code to the top of my regular web page template and just move the
echo $display_block
down to the body portion, and then do the same with the slideshow.php code, only this time echo the <BODY> portion of the "PRINT HTML" section in the body.
Looks good and works quick! If you come across an issue I would love to know; certainly not posting junk on purpose!
Happy viewing!
Andy