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!

Advertisements

30 Responses to “Ajax Image Gallery: Lightbox/PHP”

  1. prreya said

    hi
    this is so superb,i was finding a way out for dat,thks a lot

  2. Kris said

    What did I forget, beceause it show nothing?

    Untitled Document

    <?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.= “\n”;
    }
    }
    return $gallery;
    }
    ?>

  3. Kris said

    It doen’t show proper.

    
    
    Untitled Document
    
    
    
    
    
    
    
    
    
    &lt;?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) &amp;&amp; ($file != ".." &amp;&amp; $file != ".") &amp;&amp; in_array($extension, $extensions)) {
    $gallery.= "<a>\n";
    }
    }
    return $gallery;
    }
    ?&gt;
    
    
    
    
     
  4. Kris said

    Well that doen’t work….

  5. blindape said

    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.

  6. Charlie said

    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

  7. […] 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 […]

  8. Caleb said

    is there a way to be able to sort the images in filename alphabetical order?

  9. Viper said

    Hey… why can’t these scripts seem to auto create the thumbnails using GD2?

    I use Joomla and joomlaworx simple image gallery as well as yootheme gallery both do simple galleries with php and autocreate the thumbnails.

    Could CSS be used to implement thumbnails instead of manually having to create them?

    here is an example of the thumbnail script in a joomla environment using mootools I believe.
    http://www.encinocarwash.com/clean-gallery.html

    Images are called from a folder and the thumbnails are created based on a small set of parameters like size and quality. Then done. all using GD2 Only and not even sure its using that.

  10. cameron said

    hi this great job.
    is it posible to list name of folder and subfolder,What I want:Picture gallery folder have a few subfolder and I want to this script read all folders and subfolder inside pictures and list it page.İf this posiible how can I do.
    thanks

  11. snesho said

    Hi,

    I cant get it right. The images do not show a lightbox when i click on them.

    Please help

  12. well.. it’s like I thought!

  13. amerie said

    Hello, I would like to thank you for uploading these files. Also, it is poossible to upload the title and image description by php to show in the lightbox as well? Is it possible to upload video files too?

    Thank you:)

  14. Larry said

    Works great with the zip file you included, i like it so much i left credit and a link to this site in the source.

  15. Josh said

    That worked great. How can I have this function using a mysql database instead of folders?

    I seem to have it working almost here, but it doesn’t show the next and previous buttons to move to the other images.
    http://www.joshkellman.com/test.php

    Any suggestions?

    Thanks,
    Josh

  16. Greg said

    Can I use this on my HTML site?

  17. Jack 3d said

    What’s up, I just found this blog – thank you for writing. As an FYI that it’s not displaying correctly on the BlackBerry Browser (I have a Pearl). Anyway, I’m now on your RSS feed on my laptop, so thank you!

  18. PiterJankovich said

    My name is Piter Jankovich. oOnly want to tell, that your blog is really cool
    And want to ask you: is this blog your hobby?
    P.S. Sorry for my bad english

  19. littlebear said

    wow, it’s awesome, thanks

  20. Jack3d said

    Hey, I posted about 12 months previous stating that I could not read your postings properly. I don’t know if you edited your site but I can now read it the right way, thank you. I’m using a BB Curve.

  21. Dbsgpdqz said

    How much is a First Class stamp? little perky tits 78068

  22. Ajdxjhbk said

    Which university are you at? pthc girl
    =-(((

  23. Usgyzpjb said

    The line’s engaged http://afihygajaqam.de.tl little latin nymphets
    This is not a German Girl.This is a Bulgarien girl her name is Daniela and boy name is Jordan this is muvie from Bulgarien City Bansko

  24. Ttruzudd said

    A few months http://runociqagako.de.tl little nymphet movies she has a really cute face , a the sexxiest feet and she do it right , the way every man likes , she is awesome , whats her name ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: