Ajax Image Gallery: Lightbox/PHP
December 24, 2006
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!
July 3, 2007 at 6:42 pm
hi
this is so superb,i was finding a way out for dat,thks a lot
July 16, 2007 at 8:19 pm
What did I forget, beceause it show nothing?
Untitled Document
<?php
&& in_array($extension, $extensions)) {
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 != “.”
$gallery.= “\n”;
}
}
return $gallery;
}
?>
July 16, 2007 at 8:21 pm
It doen’t show proper.
[code]
Untitled Document
<?php
&& in_array($extension, $extensions)) {
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 != “.”
$gallery.= “\n”;
}
}
return $gallery;
}
?>
[/code]
July 16, 2007 at 8:21 pm
Well that doen’t work….
July 16, 2007 at 9:30 pm
Hello Kris,
I wrote you a short email which hopefully should help you.
For all others: You can also download an example as a .zip-file from here:
http://thomas-harrer.de/lightbox_from_folder.zip
It contains all the needed libraries (like prototype.js and lightbox.js), css-files and some images to show you what should happen
Cheers,
blindapeinc.
November 25, 2007 at 5:58 pm
Greetings Blindape:
I just wanted to thank you for putting your code online like this for others to benefit from. It is very generous on your part.
I have changed it a bit to work with Lytebox which I usually prefer instead, and it works fine.
Charlie
December 13, 2007 at 10:55 pm
[...] AJAX-powered gallery/slideshow is what I want. I need to look into it a bit more, but this may do the trick. Share and Enjoy:These icons link to social bookmarking sites where readers can [...]