So let's go through the code bit by bit to explain how it works.
We have three variables $images, $big,
and $cols.
$images is responsible for the location of the
smaller images which it will use to build the "thumbnails" or
contact sheet. $big is responsible for holding
the location of the larger, full resolution images. Technically,
you could put all the files in the same directory and use an
identifier on the full resolution images to provide uniqueness
between it and the "thumbnail". For instance, appending the string
"big" or such to the end of the filename would be sufficient, and
then modify the a href line to append the string
to the end of the filename. I'll mention this when we get to that
part. Finally $cols is responsible for determining
how many columns we want to display the images in. For this tutorial,
I've set this to two. It's important to keep the "/" at the
end of the folder names. You'll break the script if you don't.
The next thing we're doing is opening the folder containing the
images as defined by the $images variable. We're
looping through the directory and adding every file it finds to
an array called $files[]. Take note of the
nested if statement. It's job is to prevent
adding the ., .., and $big folders to the array,
because those would show up as broken images. It's important to
note that this will add any file found in the $images
folder to the array and attempt to display it as an image. There
are ways around this with more code, but this is a really basic
image gallery script. The last thing we do in this part is close
the resource allocated to the directory open.
Now, we initialize the $colCtr to zero and output
the first part of the table. Our next step is to loop through
the $files[] array and fill that into a table.
We want a couple things to happen here. The first is that we
want to display the "thumbnails" and secondly we want someone to
be able to click the thumbnail and have it display the full
resolution image.
The first thing we do in our for loop is to test
whether the $colCtr is the same value as
$col that we defined. If it is, we're going to close the
table row, put an hr, and then start a new row.
Here's where the real meat is. We're outputting an a href
which uses three variables to build the link to the full resolution
image. $images . $big . $file which in this
tutorial works out to: image_gallery/big/something.jpg. Next,
we output the image as $images . $file.
I mentioned earlier that you could keep all the files in the
same folder and distinguish the full resolution image with a
unique identifier like appending "big" to the filename. So, for
example, let's say we have an image of a dog, in which the
"thumbnail" is called dog.jpg and the full resolution image is
called dogbig.jpg. You can use the PHP str_replace()
function to replace the "." with "big." or vice versa if you used
the string "small" on the thumbnail, in which you could also use the
PHP str_replace() function to replace the string
"small" with "" (nothing). Either way works. It's up to you.
Next we increment the $colCtr variable so we
can output the number of columns we want. And then lastly, close
the table when we've output all the images.
Well, that's how you do it. Pretty simple huh?
Now.... Let's suppose you want to include text below each image
to describe it for your viewers. This is pretty simple too. Let's
first look at how it shows up, then we'll examine the code.
|
| 
Balloon Fiesta!
| 
Our Halloween Pumpkin
|
| 
Converting our garage to a halloween cave
| 
My little ghoulish helpers
|
| 
Ash meets Cinderella on her 7th B-day
| 
Jayden's first snowday
|
And here's the code that did this.
<?php
$images = "image_gallery/"; # Location of small versions
$big = "big/"; # Location of big versions (assumed to be a subdir of above)
$cols = 2; # Number of columns to display
$text = "image_gallery_description.txt";
$fh=fopen($text, "r");
while(!feof($fh))
{
$temp = explode(",", $line);
$description[$temp[0]] = $temp[1];
$line=fgets($fh);
unset($temp);
}
if ($handle = opendir($images)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && $file != rtrim($big,"/")) {
$files[] = $file;
}
}
closedir($handle);
}
$colCtr = 0;
echo '<table width="100%" cellspacing="3"><tr>';
foreach($files as $file)
{
if($colCtr %$cols == 0)
echo '</tr><tr><td colspan="' . $cols . '"><hr /></td></tr><tr>';
$allfiles .= $file . ',<br />';
echo '<td align="center"><a href="' . $images . $big . $file . '"><img src="' . $images . $file . '" /></a><br />' . $description[$file][0] . '</td>';
$colCtr++;
}
echo '</table>' . "\r\n";
echo $allfiles;
?>
|
