Ajax Image Gallery: Lightbox/PHP

When working on a new site, I was looking for a new image gallery solution. After some loking around for Ajax image galleries, I stumbled upon Lightbox v2.02 from Lokesh Dakar aka huddletogether.com/.

It looked great and did what it should: Show images as a nice Ajax Lightbox. Problems? None other than that images couldn’t be loaded directly from a folder but you had to enter each image by hand. Solution? Yes, there was one.

In the huddletogether messageboard was one entry from Markus Steinhauer, describing a PHP script reading the image names from a given folder and encoding these for the direct use in the Lightbox Script. As it was pretty scrambled through the forum layout, I redid his work and added a second variable for image thumbnails which get loaded from a different folder. Here’s the php script to insert into your file:


<?php
function createLbFromDir ($linkname, $galname, $directory, $thumbdirectory, $extensions = array ('jpg', 'jpeg')) {
$gallery = "";
$dh = opendir ($directory);
while ($file = readdir ($dh)) {
$parts = explode(".", basename ($file));
$extension = $parts[count($parts)-1];
if (!is_dir ($directory . $file) && ($file != ".." && $file != ".") && in_array($extension, $extensions)) {
$gallery.= "<a href=\"".$directory.$file."\" rel=\"lightbox[".$galname."]\">\n";
}
}
return $gallery;
}
?>


To call it, you need to insert the following line (changed with your configuration):


<?php echo createLbFromDir ("linkname", "galleryname", "path/to/imagegallery/" , "path/to/thumbs/");


You need to replace the four variables: “linkname” is the name of your image gallery. “galleryname” is the internal name of your gallery, if you want to insert more than one image gallery in one page, you need to use seperate name here. “path/to/imagegallery/” needs to be set to the folder where your images are; “path/to/thumbs/” should be set to the path where your thumbnail images are. The thumbnail images need to have the same names as the big ones in the imagegallery folder!