id="bsap_1255973" class="bsarocks bsap_db3b221ddd8cbba67739ae3837520ffe">

class="article">

Automatically Generate a Photo Gallery from a Directory of Images: Updated

href="http://davidwalsh.name/dw-content/generate-photo-gallery.php"> src="http://davidwalsh.name/dw-content/preload-images-thumbs/2.jpg" alt="PHP Photo Gallery" class="image" />

Two years ago Chris Coyier wrote an outstanding tutorial detailing href="http://scriptandstyle.com/automatically-generate-a-photo-gallery-from-a-directory-of-images" rel="nofollow">how you can generate a photo gallery based on the images within two directories: a thumbnails directory and an originals directory. I've decided to take his tutorial a step further by showing you how to generate thumbnails for the gallery using PHP. I've also implemented a MooTools lightbox: href="http://gueschla.com/labs/smoothbox/" rel="nofollow">Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your photos in a directory.

The CSS

.clear			{ clear:both; }


.photo-link		{ padding:5px; margin:5px; border:1px solid #ccc; display:block; width:200px; float:left; }


.photo-link:hover	{ border-color:#999; }

The images/links will be floated next to each other. The other option would be to use a table. Booooo.

The PHP: Utility Functions

/* function:  generates thumbnail */


function make_thumb($src,$dest,$desired_width) {


	/* read the source image */


	$source_image = imagecreatefromjpeg($src);


	$width = imagesx($source_image);


	$height = imagesy($source_image);


	/* find the "desired height" of this thumbnail, relative to the desired width  */


	$desired_height = floor($height*($desired_width/$width));


	/* create a new, "virtual" image */


	$virtual_image = imagecreatetruecolor($desired_width,$desired_height);


	/* copy source image at a resized size */


	imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);


	/* create the physical thumbnail image to its destination */


	imagejpeg($virtual_image,$dest);


}





/* function:  returns files from dir */


function get_files($images_dir,$exts = array('jpg')) {


	$files = array();


	if($handle = opendir($images_dir)) {


		while(false !== ($file = readdir($handle))) {


			$extension = strtolower(get_file_extension($file));


			if($extension && in_array($extension,$exts)) {


				$files[] = $file;


			}


		}


		closedir($handle);


	}


	return $files;


}





/* function:  returns a file's extension */


function get_file_extension($file_name) {


	return substr(strrchr($file_name,'.'),1);


}

We'll use three utility functions to make the system work: get_files (retrieves all of the files in a given directory), get_file_extension, and make_thumb (generates a thumbnail image from a source image). These are good functions to keep at hand for other purposes too.

The PHP: Setting and HTML Generation

/** settings **/


$images_dir = 'preload-images/';


$thumbs_dir = 'preload-images-thumbs/';


$thumbs_width = 200;


$images_per_row = 3;





/** generate photo gallery **/


$image_files = get_files($images_dir);


if(count($image_files)) {


	$index = 0;


	foreach($image_files as $index=>$file) {


		$index++;


		$thumbnail_image = $thumbs_dir.$file;


		if(!file_exists($thumbnail_image)) {


			$extension = get_file_extension($thumbnail_image);


			if($extension) {


				make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);


			}


		}


		echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';


		if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }


	}


	echo '<div class="clear"></div>';


}


else {


	echo '<p>There are no images in this gallery.</p>';


}

The first step is to define a few simple settings which will dictate image paths, the width by which all thumbnails will be created, and the number of images per row. The action begins with rounding up all of the files. With every image in the gallery, we check to see if a thumbnail exists. If a thumbnail doesn't exist, we use PHP and the utility function above to generate one. When the thumbnail is generated (or there was one there in the first place), we output the HTML link/image. I've given the A element the "smoothbox" CSS class so that Smoothbox will make the larger image display in the lightbox.

The MooTools JavaScript / Smoothbox

All you need to do is include the JavaScript file. Sweet.

That's it! Have any features you'd like to see added? Let me know!

id="singlesSponsors">
class="clear" />

id="related">

style="clear:both;">

id="comments">

Comments

id="comment-list">
1. id="comment-16791">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>Mat€Ûj Grabovsk†­

   Just a note: it would be wiser to use pathinfo ( href="http://php.net/pathinfo" rel="nofollow">http://php.net/pathinfo) to get the extension of a file. It would also be nice to use FilterIterator ( href="http://php.net/FilterIterator" rel="nofollow">http://php.net/FilterIterator) along with DirectoryIterator ( href="http://php.net/DirectoryIterator" rel="nofollow">http://php.net/DirectoryIterator) instead of that boring, inefficient loop in get_files().

2. id="comment-16792">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2a3b114a8bd0d55984db5da18e005262&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Santiago Quiss

   Another example with Christina Ricci, I’m starting to think you make this tutorials just to post a photo gallery of her… :)

3. id="comment-16793">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=24e08a9ea84deb17ae121074d0f17125&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mathiasbynens.be/' rel='external nofollow' class='url'>Mathias Bynens

   Why don’t you use href="http://php.net/scandir" rel="nofollow">scandir()?

4. id="comment-16794" class="dw">
   class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh

   @Mathias Bynens: My solution is PHP4 compliant, as much as people probably don’t care.

5. id="comment-16795">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=ee9bd704392041131fd5af5452463ae0&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.aviationreviews.com/' rel='external nofollow' class='url'>Matthew J

   Very cool! Nice automation of PHP.

6. id="comment-16798">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b3c48c49d288e3487dc628bb30e851f6&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">jamie

   nice article. this gave me an idea for a theme that I was working on. I am going to use this. Thanks.

7. id="comment-16807">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

   Nice article, yeah! I modified it to work with the jQuery fancybox plugin. What would be a valuable addition is to get it to work with other fromats (PNG, GIF,).
   /> Would you add the code to do that?
   /> Thanks now!

8. id="comment-16809">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

   Well I had nothing to do tonight so I was able to spend some time to figure out how to add PNG files to a directory and get it to work.

9. id="comment-16814">
   class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=dffd46a9960ac183bad2e2100444940c&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://imperion.pl' rel='external nofollow' class='url'>PaweŠÂ P.

   @Mathias – I didn’t know this function. Thanks!
   /> @David – Good tutorial, best regards!

10. id="comment-16815">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc

    I’ve done something similar myself in the past, but with a few added features. For example, a text file “title.txt” inside the folder which contains an album’s title, and reading the EXIF comment (using PHP) for titles / captions etc of the individual images.

11. id="comment-16820">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=e68f333dc62a5ff905e4c89a7a3340de&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.soentjens.nl' rel='external nofollow' class='url'>Tampert

    detail. I like picture 2 a lot :P nice work!

12. id="comment-16821">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=72e3a6f0cb34a70554861c6b8ee748f7&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">David

    @William Rouse: And how did you do it? I’m pretty interested in PNG and GIF support too…

13. id="comment-16822" class="dw">
    class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh

    I want to say it would be simple. There are only two JPG-specific functions; those would change dynamically. Let me play with this some more.

14. id="comment-16824">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc

    To make it support multiple image types, how about using phpThumb() for the thumbnailing? You could then have all it’s options for thumbnailing, i.e. raidus corners, frames etc. etc….

15. id="comment-16825" class="dw">
    class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh

    @Marc: PHPThumb is nice but could be overkill — look how small the current thumbnail-generating function is. Adding PNG and GIF support likely wont add much.

16. id="comment-16826">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

    There are a few changes to make to get it to work.
    /> In the index.php file add variable $extension to the call of make_thumbs():
    /> if($extension) {
    /> make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width, $thumbs_height, $extension);
    /> }

    In the galleryUtil.php file change the function get_files to this:
    /> /* function: returns files from dir */
    /> function get_files($images_dir,$exts = array(‘jpg’, ‘png’)) {
    /> $files = array();

    And lastly in the make_thumb function except a new parameter for the extension, and set up two if structures:

    /* function: generates thumbnail */
    /> function make_thumb($src,$dest,$desired_width, $desired_height, $ext ) {
    /> /* read the source image */
    /> if ( $ext == ‘jpg’ || ext == ‘jpeg’ ) {
    /> $source_image = imagecreatefromjpeg($src);
    /> }
    /> if ( $ext == ‘png’ ) {
    /> $source_image = imagecreatefrompng($src);
    /> }
    /> òÀæ.

    if ( $ext == ‘jpg’ || ext == ‘jpeg’ ) {
    /> imagejpeg($virtual_image,$dest);
    /> }
    /> if ( $ext == ‘png’ ) {
    /> imagepng($virtual_image,$dest);
    /> }

    ThatòÀÙs it.

17. id="comment-16840">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

    @Mat€Ûj Grabovsk†­: Would you demonstrate how to rewrite the function using the methods you suggested and are available in PHP5
    /> Thanks!
    /> WBR

18. id="comment-16843">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA

    @David Walsh: While it is nice to keep things compliant… it is better to actually encourage people to move forward, I am pretty sure they are going to be discontinuing support for it soon…

19. id="comment-16844">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA

    @SeanJA: (It being PHP4…)

20. id="comment-16845" class="dw">
    class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh

    @SeanJA: I suppose — I dont’ think it’s that big of a deal.

21. id="comment-16846">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA

    @William Rouse: Could you not just use imagecreatefromstring instead?

22. id="comment-16848">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

    I just read the docs on imagecreatefromstring. Please show me how to use it.

23. id="comment-16885">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=8854082283430d5c5f283d1381efdb56&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Justin Noel

    I love all the cool gallery features of your solutions and others I’ve come across. However, they all lack one simple thing for me. Captions.

    How could I display captions for your solution?

24. id="comment-16886">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc

    @Justin: Use PHP’s exif_read_data to read any EXIF comment in the JPG file, and use this as the caption.

25. id="comment-16903">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=88ea4e10ed968136228545d7112d82cb&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://stevegrunwell.com' rel='external nofollow' class='url'>Steve Grunwell

    I’ve done a few of these in the past few months (including multi-tiered versions with different sub-directories representing different galleries), and have found PHP’s glob() function to be a real timesaver.

    Obviously, you’ll want to check that all the files in the directory are indeed images, but you already seem to be doing this with your get_file_extension() function.

26. id="comment-16905">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=731d737ba2731178df040d364bf966a1&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.geekandhype.com' rel='external nofollow' class='url'>Joffrey

    Don’t you know glob()? It’s really useful, you could save a lot of lines. :)

27. id="comment-16911">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>Mat€Ûj Grabovsk†­

    @William Rouse: The get_files functions could be rewritten like this: href="http://gist.github.com/361919" rel="nofollow">http://gist.github.com/361919

28. id="comment-16912">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>Mat€Ûj Grabovsk†­

    @William Rouse: Sorry, fixed link: href="http://gist.github.com/361922" rel="nofollow">http://gist.github.com/361922

29. id="comment-16929">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse

    @Mat€Ûj Grabovsk†­: Thanks for the code.

30. id="comment-16940">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b5c85ea91e6dfa0359ed64f627a7fd69&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.kensfi.com' rel='external nofollow' class='url'>ken

    wow impressive work! I was just thinking how to make a photo gallery with some family pictures and this script will do the job. Thanks!

31. id="comment-17031">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=f8b76a39292c7ac77d07b04c43ec6fb9&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.fr3do.info' rel='external nofollow' class='url'>Fr3do

    Thks nice article

32. id="comment-17074">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=64fa8dbe5c978ab7f4aeda4dbceb8e19&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://linkdump.abhar.org/' rel='external nofollow' class='url'>Mehdi

    can you make a package to download, please.

33. id="comment-17086">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=d8173369e7509dea5626d6a06ec6e7ef&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Rudy Vail

    I agree with Mehdi. This is exactly what I need, but, since I’m a newb, I’m not sure what to do with the three separate code blocks you provide. I would love to have a working package that I could test and edit to fit my needs.
    /> Thanks for sharing your knowledge, David!

34. id="comment-17116">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=d7eaba30fa631a9dc7b9c1acb9f1971b&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.jhondoe.info' rel='external nofollow' class='url'>Jhon Doe

    could see the GD library used to generate small images … winning hard disk space
    /> I say :P

35. id="comment-17170">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=eebd80a6ee793b9a03587b63ce2a2bdb&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.emonkeyz.com' rel='external nofollow' class='url'>William Garrison

    Hey David,

    This is awesome. I was wondering though if we could make this work for a Flickr directory. By this I mean If I uploaded to a specific folder in my Flickr account could i get this to generate the same on my website?

    If so, how? I’m not nearly as tech savvy as you so any help would be epic!

36. id="comment-17253">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=6b718df475c4d72079896c9d813f3c36&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Vinnie

    David, my question is not very related to this topic, but I could not find a better place to contact you. I was reading the comments of this website:

    href="http://css-tricks.com/redirecting-to-a-splash-page-but-only-once-with-cookies/" rel="nofollow">http://css-tricks.com/redirecting-to-a-splash-page-but-only-once-with-cookies/

    and I found your comment there suggesting to use php to set a cookie to show a splash page only once. I’m needing almost the same thing. I want to show an ads banner only once when the first page of the website get loaded.

    Do you mind sharing a simple working example as I’m not that expert with php?

    Thank you in advance.
    /> PS. I’ll understand if you remove this comment or place it anywhere else.

37. id="comment-17254">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=6b718df475c4d72079896c9d813f3c36&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Vinnie

    David, my question is not very related to this topic, but I could not find a better place to contact you. I was reading the comments of this website:

    href="http://css-tricks.com/redirecting-to-a-splash-page-but-only-once-with-cookies/" rel="nofollow">http://css-tricks.com/redirecting-to-a-splash-page-but-only-once-with-cookies/

    and I found your comment there suggesting to use php to set a cookie to show a splash page only once. I’m needing almost the same thing. I want to show an ads banner only once when the first page of the website get loaded.

    Do you mind sharing a simple working example as I’m not that expert with php?

    Thank you in advance.
    /> PS. I’ll understand if you remove this comment or place it anywhere else.

38. id="comment-17258">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA

    @Vinnie: Posting the same question repeatedly is obviously the way to get help.

39. id="comment-17261">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=6b718df475c4d72079896c9d813f3c36&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Vinnie

    @SeanJA: Do you really think it was my intention to post the same question repeatedly? It would be better if you could provide the answer to my question (in case you know the answer) than say what you don’t know.

40. id="comment-17262">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA

    @Vinnie: It is not really that hard is it?

    On the spash page:

    $spash = isset($_COOKIE['spalsh'])? = false:true;
    /> if($splash) // show spash page and set cookie
    /> else // don’t show splash page and continue to the main page

41. id="comment-17277">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=d9e05060bdeccdce0d9dfcabd6af0b24&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Jacob Christoffels

    Is there any chance someone makes a download package with a working gallery? I’m more a designer than a developer but with a working demo and a look at the html/php implementation I think I can make it work.
    /> Thx

42. id="comment-17350">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=37fc0da699478b89bb25a5e72a24d0c8&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Dez

    Nice Script, I’m curious as to how the script sorts thumbnails? I can’t seem to figure out how it sorts files and how to make it sort by filename. Any help would be appreciated. Thanks.

43. id="comment-17910">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=926281ad06d7c83cdaef08bf4a68c06b&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.boomtang.com' rel='external nofollow' class='url'>Rob

    Very useful script, thanks! I’m also wondering how to sort the thumbnails; preferably alphabetically. Any suggestions?

44. id="comment-17911">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=926281ad06d7c83cdaef08bf4a68c06b&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.boomtang.com' rel='external nofollow' class='url'>Rob

    @Rob and Dez: Ah, here we go… to sort alphabetically, just do this:

    After the line

    $image_files = get_files($images_dir);

    insert this

    sort($image_files);

45. id="comment-18391">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=ca9df85c844b00e44277dd7e24340df9&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Frido

    Hey – I have exactly the same problem as Mehdi and Rudy Vail – the code blocks are confusing, and I have a feeling of that something is missing, do I need the code from the previous version? I can’t make it work (a folder with big pictures, which the code will generate thumbs from and make a gallery, without having to make the thumbs-files myself)

    One package with examples would be over-the-top! Nice sharing though :)

    /Frido

46. id="comment-18532">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=f0c15869455b74c59118f410fb5521f8&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">derrick

    Is there a way to limit the amout of thumbs coming in?
    /> What if you had 30 images, and you only wanted 10 images shown at a time with maybe some sort of button that adds 10 more. Is that possible with this?
    /> thanks,

47. id="comment-18592">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=a8b7736ea0ba8d1be4d4edbd9798b027&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">daniel

    yes, can we somehow adopt this script to autocreate “pages”. It already has a set number of images per LINE, how about a set number of LINES per “page”?

    I could figure out how to hack this if it the “pages” would be straight html, but I’m lacking the experience in PHP and CSS….

48. id="comment-18661">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=5a24811315390174d40f4d0946d1feb1&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">ellen

    using the older version, I want to sort files and, if possible, add captions to the enlarged versions.

    So… for sorting files do I use:

    sort($image_files);

    and if so, where does that go?

    Thanks for any help and advise. (I already have my thumbnails prepared and named.)

49. id="comment-18810">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=24f5929bb70b350436688e58c9a9bf87&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.minnowwebdesign.com' rel='external nofollow' class='url'>Paul

    Excellent tutorial, thanks.

    I made a minor change based on a problem I have sometimes, which is getting a bunch of images, and they are too large. I know there are batch conversion programs out there that reduce image size, but I thought I’d try this one. It was very easy to do.

    I added two varialbes in the settings…
    /> $mid_dir = ‘galleryMidPreload/’;
    /> $mid_width = 800;

    and added
    /> $mid_image = $mid_dir.$file;
    /> if(!file_exists($mid_image)) {
    /> $extension = get_file_extension($mid_image);
    /> if($extension) {
    /> make_thumb($images_dir.$file,$mid_image,$mid_width);
    /> }
    /> }

    after the if block that looks almost the same(could be made in to a function to clean up code)

    lastly made a change to

    echo ‘ href="',$mid_image,'" rel="nofollow">‘;

    notice $mid_image this was the only change to this line.

50. id="comment-19088">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2196aa6f05f1025504120d6f60260bdc&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Didier

    Hi David

    Always smarts examples !

    Is-it possible to extend your example to make it function using urls rather than images in a folder ? (image of a web page given the url)

class='children'>
• id="comment-29111">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2196aa6f05f1025504120d6f60260bdc&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.saepe.ch' rel='external nofollow' class='url'>Didier

  Hi

  For your info I use the well known IEcapt.exe to create images of web pages given an url …

  Even if you need to add some threads to avoid the freeze of your program during the creation of picture, it gives good results … results can be seen here at href="http://www.saepe.ch" rel="nofollow">http://www.saepe.ch

  Do you use it too ?

  PS : thks again to David who is inspiring a lot !

51. id="comment-19231">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=28f16b6a8e30ed1e1cc00b0410f37e9d&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Nobody

    It took me awhile in figuring it out on how to run this whole package.
    /> So I wrote a little summary on what I did. (maybe saving others time)

    Here it goes:

    First, create a test folder. (gallery maybe)
    /> then make sure you have these files:

    gallery.php – see below
    /> mootools.js
    /> smoothbox.js
    /> smoothbox.css
    /> loading.gif
    /> create a subfolder named preload-images and put your pictures there
    /> create an empty subfolder named preload-images-thumbs

    Now for the gallery.php

    /* copy and paste the css here */

    Well, aside from this little trouble I had. It’s a nice piece of work!

52. id="comment-19232">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=28f16b6a8e30ed1e1cc00b0410f37e9d&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Nobody

    Here’s the (missing) gallery.php from above

    <html>
    /> <head>
    /> <script type="text/javascript" src="mootools.js"></script>
    /> <script type="text/javascript" src="smoothbox.js"></script>
    /> <link rel="stylesheet" href="smoothbox.css" type="text/css"/>
    /> <style type="text/css">
    /> /* copy and paste the css here */
    /> </style>
    /> </head>
    /> <body>
    /> <?php
    /> // copy and paste all the php codes here
    /> ?>
    /> </body>
    /> </html>

53. id="comment-19236">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=fe7e02b0a865799237aaee3f4f23fdfc&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">James

    Is there an asy way to get this to work with subfolders?

    These subfolders would then be the albums (containing various images) in the gallery

54. id="comment-19246">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=a4317823ecd181e6b018913b3244b61a&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://diteam.com' rel='external nofollow' class='url'>Daryl Isaacs

    Do you have a sample page to look at – the code in place I mean – so i can see where I’m going wrong.

    I cant seem to get this to work.

55. id="comment-19287">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=30306665d9fe44abeea84e7640004d77&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">warren

    Anyone have a way of create multple galleries from this script?

56. id="comment-19290">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=fe7e02b0a865799237aaee3f4f23fdfc&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">James

    Found an alternative that supports subfolders
    /> href="http://sye.dk/sfpg/" rel="nofollow">http://sye.dk/sfpg/

57. id="comment-19299">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=a4317823ecd181e6b018913b3244b61a&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://--' rel='external nofollow' class='url'>Daryl

    Thank you – went and got it – looks promising!

58. id="comment-20911">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=4253312b5201f761142c7403ee0c64e4&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Ken

    I really like this automated script and improvement on adding auto thumbnails.
    /> The one change I would like it that the longest side of the thumbnail is a fixed size and the shorter length is in appropriate perspective.
    /> That way the thumbnails are in a square box no matter whether vertical or horizontal.
    /> Will look better that fixed with only.
    /> How do I script that?
    /> Also, how would I use FancyBox? Much prefer it’s look over MooTools SmoothBox?
    /> Thanks for help

class='children'>
• id="comment-20916">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=326a1f06c7129f18c150eab2082fbe3c&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://artscreen.dk/selection/index.php' rel='external nofollow' class='url'>Mads Petersen

  I ust tried to do the same thing as I hear you saying Ken..

  Now i just changed width=”100″ height=”100″ to maxwidth=”100″ maxheight=”100″ in index.php

  Now it made the thumbs display with the right proportions, like I wanted.. But now the way the pictures are displayed all together, is messed up..

  Teck it out:
  /> href="http://artscreen.dk/selection/index.php" rel="nofollow">http://artscreen.dk/selection/index.php

  Help appreciated

  Cheers,
  /> Mads

• id="comment-20999">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=4253312b5201f761142c7403ee0c64e4&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Ken Shaw

  can you provide a copy of your full script?
  /> that way I can see where you made the changes with maxwidth/maxheight
  /> You are almost there and I want to tinker too but not being a programmer it is a lengthy struggle.
  /> I see you got it working with fancybox instead of smoothbox.
  /> Thanks
  /> Ken

• id="comment-21000">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=4253312b5201f761142c7403ee0c64e4&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Ken Shaw

  last posting was addressed to Mads

• id="comment-20917">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=326a1f06c7129f18c150eab2082fbe3c&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://artscreen.dk/selection/index.php' rel='external nofollow' class='url'>Mads Petersen

  I have 2 questions.

  1)
  /> I would like to auto display the titel of the pictures underneath the thumbs (imagename.jpg)
  /> (Like a picture in a folder on my HD)
  /> Any hints on how to do this?

  2)
  /> When clicking the thumbs i would like the big picture to be displayed Fullscreen.
  /> Anyone knows if this would be possible some how? I tried to “ask” smartbox through google.. But no luck..

  Any help ore hints will make me happy ;)
  /> Have a nice weekend.

  Cheers,
  /> Mads

59. id="comment-20983">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=eb1430027d8927216de06e5b0b74cf24&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://wildreason.com' rel='external nofollow' class='url'>David Ryder

    I don’t think PHPThumb is overkill. The thumbnails in this script look jagged. The only thing I did was remove the thumbnail generation script and replace the HTML echo statement with this:

    echo ' href="',$images_dir.$file,'" rel="nofollow">';

60. id="comment-21461">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=c83ee48da4cf8ef9e647e885cb57de16&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Jake

    Hi,

    I would really like to use this script however I would like the images to be squared. ie. the same size.

    Is this possible at all?

    Thanks,

    Jake

class='children'>
• id="comment-21463">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=eb1430027d8927216de06e5b0b74cf24&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://wildreason.com' rel='external nofollow' class='url'>David Ryder

  You can use the PHP function imagecopyresized to resize images as they are being processed.

61. id="comment-21499">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=f633ae6c4752e77972d75f19a216ab35&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Greg

    Nice work again David, thanks for sharing. On some browsers (Safari for example) horizontal scrollbars appear when the thumbnail is clicked… any idea how to kill these? (It doesn’t seem to be a small-screen problem).

    Also, is it easy/possible to create a second gallery on the same page?

    Thanks!

62. id="comment-22509">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=6238801b94de6f700ebb6f7b15472295&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Bert

    Hi,
    /> Thanks for the code David.
    /> I’m trying to edit it so that the thumbs are displayed in one long row.
    /> I also want the page to expand to the right to accommodate the long row of thumbnails.
    /> No matter what I try, the thumbs always start a new row when they reach the edge of the browser.
    /> Any ideas anyone?

63. id="comment-22733">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=28a99d7b2e50744a6681606a862810f9&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://momoc.sumasu.com' rel='external nofollow' class='url'>MOMOC

    Thanks for this script, I really need this kind of script because I’m a freelance photographer.

    From the comment above..some of them like the thumbnaild to be crop..not resized..like this href="http://scriptandstyle.com/AutoGeneratingGallery/" rel="nofollow">http://scriptandstyle.com/AutoGeneratingGallery/ i wonder how they make the thumbnail crop. This sample comes from the same script with some adjustment.

    Anybody know how to make thumbnail like this.

    Thanks guys,
    /> apprechiate it

64. id="comment-22755">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=dd5705495558c12b0b961da840d9943b&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.thinkccm.com' rel='external nofollow' class='url'>CCM

    Form and function. Love it.

    For the record, and I’m sure almost everyone knows this, but you can’t change filenames and expect this thing to work. For non-programming designers out there, don’t go changing mootools-1.2.4.js to anything shorthand. That’s 4 hours of my life I’ll never see again.

    David, I notice the lightbox appears to “swoosh” in from the bottom left … anyway of just making this a simple fade-in fade-out? If functionality is already there, how would you tell a designer non-programmer type how to change this?

    Great tool and I plan on using it whenever possible. Good work and thank you! BTW … GO BADGERS! Buckeye killers this year.

65. id="comment-23011">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=287ae6eb77a1a453c2a2038b16793013&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://erikhodson.com' rel='external nofollow' class='url'>heymelby

    i am so pissed at this thing, no matter how much i change $thumbs_width, the thumbs remain at 200 pixels! what is causing this?

    help!

class='children'>
• id="comment-28518">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=169635b099928128ded6a79194414950&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Bahb

  The thumb that is being showed, is it a .jpg?

66. id="comment-23203">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=8f0f3290959f43db1c1dd4d597d54ba7&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://scammell.co.uk/' rel='external nofollow' class='url'>Luke Scammell

    Thanks for this excellent script and the clear example, it was just what I needed.

    I agree with various people about the nasty jagged thumbnails so I just replaced the thumbnail generation with PHPThumb ( href="https://github.com/masterexploder/PHPThumb" rel="nofollow">https://github.com/masterexploder/PHPThumb) and now I have nicely resized, cropped thumbnails :)

    Thanks again!

class='children'>
• id="comment-23984">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=313eb0d34b0fb5308d8dd76a9f1d8f6e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Morley Santo

  Would you mind showing how you adapted this to this script?

  Thanks

67. id="comment-23992">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=cb58a00787c6b9ef12c50962b3bc1e70&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Ian

    I just can’t get this to work, my file paths all seem to be correct, i guess i am just a moron but i can’t get this to work, i just keep getting there are no files in this gallery, but i can’t see where i am going wrong, can someone give me “the idiots guide” to doing this, i feel it would be so much much better than any other gallery i could use and so much easier once it’s up and running

68. id="comment-24188">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=647f40c260488849bd74ddb2eb897bd0&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">lisak

    Is there some place I where I can download all files in one package?

69. id="comment-24472">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=91dba0bd4b1f9527ddfa5dc4b2b8e629&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.aronaguiar.com' rel='external nofollow' class='url'>Aron Aguiar

    Thanks for the tutorial!! and for some tips by everyone here.. :)
    /> I’ve got everything to work except for the Smoothbox.
    /> am I doing something wrong? I don’t want to say what I’ve done because I’ve done exactly like the tutorial says..
    /> am I missing something? a file? something?
    /> thanks!

70. id="comment-24485">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=39c6f9d5d250dc1a7b215f0064c26f51&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">kb

    When I try to use this script I get an error message

    Fatal error: Out of memory (allocated 11272192) (tried to allocate 6400 bytes) in /home/maitland/public_html/gallery/upload.php on line 101

    On line 101 is $source_handle = $function_to_read($images_dir . '/' . $filename);

class='children'>
• id="comment-26279">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=672b267420b834480fd346b5e668ba5d&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Matt

  href="http://davidwalsh.name/increase-php-memory-limit-ini_set" rel="nofollow">http://davidwalsh.name/increase-php-memory-limit-ini_set

71. id="comment-26240">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=672b267420b834480fd346b5e668ba5d&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Matt

    How do i go about sorting by the latest added?

class='children'>
• id="comment-26243" class="dw">
  class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh

  This will be helpful.

  href="http://www.webdeveloper.com/forum/showthread.php?t=162099" rel="nofollow">http://www.webdeveloper.com/forum/showthread.php?t=162099

• id="comment-26273">
  class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=672b267420b834480fd346b5e668ba5d&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Matt

  I actually found that while looking online, you must forgive me though as i am not the most experienced of coders! I couldn’t really figure out how to implement that in to the current script

72. id="comment-26921">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=15f173997b71aeb6e871c2a86f7a0c32&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Axess

    Hi !

    Great plugin !

    It’s possible for multiple folder ?

73. id="comment-27121">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b304403f5412a7fa7f9efd7522812284&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Chuck

    Cant seem to make it work.
    /> I keep getting “There are no images in this gallery.”

    Ive been frying my brains for over 2 hours…
    /> Followed Nobody’s walkthrough, changed folders thinking maybe this is a relative/absolute path mistake and still nothing.

    Could someone please make a package of this?
    /> Pretty please with sugar on top?

74. id="comment-27557">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b4500a8f8f5a3e24c619397bfa24eb08&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Walkoflife

    Hi David,

    a very nice solution. I get it to work when the images are stored in the same folder as the php file that is executed. I am about to include it into an Magento installation and my core images are separated from the file that runs the script. Im passing $this->getSkinUrl(‘images/gallery/collection/’); that holds “http://localhost/magento/skin/frontend/mytheme/default/images/gallery/collection/ ” to the variable $images_dir. The result, “There are no images in this gallery.” Can you help me out here? Give me some hints? I would really appreciate it!

75. id="comment-27558">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b4500a8f8f5a3e24c619397bfa24eb08&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Walkoflife

    This is really nice! But how do I get it to work when my images are separated from the script. I am trying to implement it with my Magento installation. I am passing $this->getSkinUrl(‘images/gallery/collection/’); that holds “http://localhost/magento/skin/frontend/mytheme/default/images/gallery/collection/” to $images_dir. That gives me the result “There are no images in this gallery.” Can you help me out here? I would really appreciate it!

76. id="comment-27750">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=bd8852b32db151a9d026b0db88cf8464&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mihirchhatre.com' rel='external nofollow' class='url'>Mihir Chhatre

    Could someone please illustrate how i can make those thumbnails square using this?

    href="http://return-true.com/2009/02/making-cropping-thumbnails-square-using-php-gd/" rel="nofollow">http://return-true.com/2009/02/making-cropping-thumbnails-square-using-php-gd/

    I think this was mentioned in one of the earlier posts!

    Thanks!

    Mihir.

77. id="comment-28625">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=c423afbe2f0f228166e5ae896e389d8e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Elliot

    Has anyone had an issue of the images not appearing in order?

78. id="comment-28749">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2e9b0bdee15d8e09a77bb21decdad99c&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.internet-prezentacija.com' rel='external nofollow' class='url'>WeB DiZajN

    TY for this very good info. :)

79. id="comment-29101">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=3925ab82c7206438f0bbb19e066a5daa&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Travonta

    I’m trying to use this script and I have the gallery working properly, however it keeps replicating the entire gallery anytime the page is refreshed. What can I do to prevent this?

80. id="comment-29151">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=942ca774c2deee4db9136a5287648fda&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Vikas

    i got this error

    Parse error: syntax error, unexpected ‘;’ in /home/media125/public_html/ingamepic.co.cc/new.php on line 37

81. id="comment-31156">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=e231428c731d34240d07db786a2df7a7&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Falcon

    What happened to the original Chris Coyier tutorial? The link no longer works :( I’d much rather use that one, unless of course the thumbnails can be automatically generated to be the same size without warping the image.

82. id="comment-31178">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=e231428c731d34240d07db786a2df7a7&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Falcon

    No wait, never mind! I used this one. Only reason I was attracted to the old auto gallery was because of the beautiful square cropped thumbnails. But I’m loving the auto thumbnails I must say.

    Just want to chime in with the rest of them on how to add the square cropping code mentioned above.

83. id="comment-31480">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=0331404da2a8e2922c9adc5c788c5b38&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Peter

    Hi,

    Great tutorial, thank you.

    Have a question though. How hard would it be to modify it to handle subdirectories?

    Tried to combine it with another solution but failed unfortunately.

    Was also thinking about creating the thumbnails in a similar way using the same dir structure as the images.

    Do you have any suggestions? All ideas are appriciated.

    Thank you.

84. id="comment-31977">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b95280d9f63944c34e7749f22a4a97cb&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Kelly

    Hi there :)

    Managed to work out your tutorial and am pretty pleased since I’m very new to PHP… But I was wondering, I would very much like all my thumbnails to be the same width and height, even though some are portrait and some are landscape. How would I edit your code to change the image height to be fixed to take part of the image?

    Hope I am making sense! :) Thanks for your help :)

85. id="comment-32616">
    class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2192f8452df6923b0d9255b5e9ea2702&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">chandana

    i wanted to upload photos and display the images in the album html code.Can anyone help me in gettine the simple and easily understandable code?

class="noPrint">

Be Heard!

class="commentSmaller">Share your thoughts without being a jerk! And wrap your code in <code> tags, style="color:#f00;">f00!