Grow your CSS skills. Land your dream job.

#64: Building a Photo Gallery

This photo gallery will automatically build itself from a directory of images, including sub-directories and the images inside them. Images open in a nice looking jQuery lightbox.

Links from Video:

Download Video File

Comments

  1. I have been working on doing something with photo galleries for the last few days. Amazing how you always seem to make one of these as I am trying to wrap my head around it.

  2. Very nice screencast. :)

    I got one suggestion. You don’t have to edit the class to add an rel attribute you can just point the lightbox to “.img-thumbnail a” like this:

    $(document).ready(function(){
    $(“.img-thumbnail a”).prettyPhoto();
    });

    • Yeah definitely, I should have mentioned that, but I also wanted to show that the class isn’t something to be afraid of but can be edited as needed to accomplish certain things. For example, I didn’t show it but I added that “GALLERY: ” text prefix to the thumbnail regions that represent a gallery not a single photo.

    • Oh I see, good one, but be sure to make notes of you changes because I’m not going to make a detailed upgrade guide when I release a new version. ;)

  3. Tenzin
    Permalink to comment#

    Hi Chris!

    A great video again! There are many web gurus around but you are among the few who never hesitate to share your skills, that’s too for free. Thanks for your kind heart!

    I am wondering how one can put in into wordpress? I am kinda new with wordpress but I am doing great with everything on wordpress. I am using wordpress as CMS for a website and I would like to use the above photo gallery shown in the video.

    Can I upload photos and write captions from wordpress admin for a photo this very photogallery?

  4. Excellent!

    Perfect timing as well Chris.

    Just this weekend my friends dad wanted to put together a photography website, this should help a ton.

  5. Did you come across an option to deal with the alt attribute it’s outputting? Looks like the cached file name or something.

  6. Helen
    Permalink to comment#

    I create one html-document per photo. That’s why my photos are no. 1 in the Google picture index.

  7. Permalink to comment#

    Nice tutorial. For those wanting an image gallery on their own server quickly, take a look at Gallery 3, http://gallery.mentalto.com
    PHP + MySQL + jQuery. Easy to extend and theme.

  8. thank you very much for this tutorial but buenisimo, no me funsiona plugin lightbox is not that I do not know if you can help me?

  9. Beau
    Permalink to comment#

    Great Screencast. However I was wondering how you could go about displaying some sort of title or name instead of the date for each image? Cheers

    • Beau
      Permalink to comment#

      On second thoughts is it possible to display the file name under the date in Gallery view and use PHP or JS to remove the extension. Let me know if and how this can be done?

  10. Very good. I’ve been working on galleries lately, so this is very apropos to my interests. I’ve been watching a lot of your tutorials lately, and I must say this one is the most _accelleralted_ one I’ve seen yet. Sniff. Thanks.

  11. I’ll watch it again tomorrow and figure it out

  12. it is my first time here to visit you site and i just felt in love with it already.
    There are very nice and useful. I love your site Chris… big hug and big thank you …

  13. TeMc
    Permalink to comment#

    This is a huge improvement – untill now I usually uploaded a folder with images, used an Automator script to generate square cropped thumbnails, upload those, use a WordPress-page-template, copy paste the WP-Lightbox code a bunch of times and copy and paste all the URLs. That sure didn’t motivate to “just put an extra” gallery in when I feel like it.

    So… two questions remaining – and I’ll be in love:

    1. How can I include the header from my theme into this and/or include this into a WordPress-page.
    2. How can I let it generate square cropped thumbnails ?

    • 1. Take a look in the example index.php file. You can use that code to integrate it into your website. I haven’t tried it with WordPress, but it should be possible.

      2. The class currently only resizes image. I haven’t made a crop function yet.

    • TeMc
      Permalink to comment#

      Hi Frank,

      Thanks for the quick response.

      I’ve got a few doubts because of another thing I’m running on my websites. But I’ll go ahead and try it right away :) – [follow up]

    • TeMc
      Permalink to comment#

      Okay, check here:

      http://css-tricks.com/forums/viewtopic.php?f=6&t=3077

      For a working solution.

      Just a few lines changing to get it work perfect in WordPress.

      Including full explaination and a zip-file download to a working version.

  14. hehe
    Permalink to comment#

    Could you please upload it YouTube? It’s really very hard watch on slow internet connection. ‘m pretty sure many people are this type of problem, so it would be helpful for them too.

    What do you think?

  15. adai
    Permalink to comment#

    I come here almost every day!It is good blog.Thinks!
    it’s do very good.but it doesn’t support Chinese well when I use it .if the the file name is Chinese it can’t be figure out correctly.hope for you answer.

  16. adai
    Permalink to comment#

    So many mistakes the comment is! I am sorry!

  17. Happy to see prettyPhoto featured into this screencast.

    Also, thanks for the layout bug, wasn’t aware of it ;)

  18. Lito
    Permalink to comment#

    Just in time. Started working on a gallery last week. This will help a lot!

  19. jozue06
    Permalink to comment#

    Parse error: syntax error, unexpected ‘=’, expecting T_STRING in …/inc/imgbrowz0r.php on line 35

    all i get is this :(

  20. Lisa
    Permalink to comment#

    now if there was a way to adapt this so you could use a flickr gallery, I’d be right as rain

  21. Carlos
    Permalink to comment#

    I like the gallery demo, but why does the player not work on Windows platform. I use Mac at home but at work I get to learn stuff but we are using Windows platform. Is there something with the encoding of the player or what is going on?

  22. Carlos
    Permalink to comment#

    The Flash movie player I mean doesn’t work on windows

  23. Sathish
    Permalink to comment#

    I must say. Absolutely perfect timing. My friends gonna come over today evening to talk about his photography gallery site.

  24. Grate job, i love your tutorials they are awesome, it help us newbie to set us up to the the correct path in CSS and other web technologies.

  25. I’m fiddling the navigation and trying to give the pagination links custom images like Chris has done it.

    In the generate breadcrumps section I’ve added a ” ” around the a href tag right (in line 266) before the first (original) img-breadcrumbs div+span.

    So far this does the job and displays my to link-images but in the browser… they are not align in one line like in Chris’s Example, the next navigation element is positioned right under the home nav button and they are overlapping. If tried to align and float them but my php knowledge isn’t that superior. Seems like I can’t find the right piece of code to modify this :(

    http://i.uaarg.de/pictures/imgbrowz0r-nav-img.png

    Is anybody willing to help me?

  26. Nic Brownlee
    Permalink to comment#

    Would love to use this but am struggling with the $config = array Directory settings: Have used:
    ‘images_dir’ => dirname{__FILE__}.’/gallery’,
    ‘cache_dir’ => dirname{__FILE__}.’/cache’,
    But still no joy, sorry, I suck at PHP, any help appreciated.

    • Do have created both folders in the root?
      In Chris’ example there is a images folder (not relevant for
      the Gallery to work – it’s only for img files you are using in
      your css design), the gallery folder (put all your picture album
      folders in here) and the cache folder.

      So, the only thing you have to do is, not to mix up the images
      with the gallery folder. So far it’s looking fine to me.

  27. ah… found it… exchange your curly braces with normal ones.

    ‘images_dir’ => dirname(__FILE__).’/gallery’,
    ‘cache_dir’ => dirname(__FILE__).’/cache’,

  28. thanks for the tut.

    when I upload my Image Folders I first have to convert all
    the Umlaute [german, french stress marks, etc].

    I know this could be handled server from the server site…
    but I’m too untalented to implement it :(

    any ideas?

  29. Permalink to comment#

    I love this.. maybe you could do something with a multiple file up loader that has a progress bar and can select the Dir you want to upload?? Thanks for taking the time to do these screen casts there great.

  30. ratandeep bansal
    Permalink to comment#

    Hi
    I was working on a project and had to make a good looking photo-gallery. This Screen-cast has been a great help and an inspiration to make what I wanted to.

    Keep up such good work…

  31. Hi,

    Looks like it works differently in FireFox than IE (as most things do).

    If I add an image say 1280 x 1024 (or any large image) FireFox will display the image using “lightbox” very nicely and at a reasonable size, without me having to change the size of the image. But IE will display the image (using “lightbox”) at its correct size which opens up very large in the browser.

    Love the gallery though!

  32. TeMc
    Permalink to comment#

    Okay, check here for a solution to get this wonderfull Imgbrowz0r to work inside of WordPress.

    http://css-tricks.com/forums/viewtopic.php?f=6&t=3077

    Just a few lines changing to get it work perfect in WordPress.

    Including full explaination and a zip-file download to a working version.

    Concept: Install Imgbrowz0r, make a page-template, and by means of a custum-field you choose what gallery to include in your page.

  33. Naomi

    This is brilliant. Again Chris you’ve helped me build something pretty.

  34. Suzi
    Permalink to comment#

    I watched some of your tutorials- they are all great. I really started as beginner but its getting every day better. For me homepage (which isn’t online yet) it would be great to male up a photo gallery too.
    I was trying to play a little bit around with this one here. But sorry for that silly question:
    How can a make that up without having a website online? I just want to run it on my pc!
    Thanks for help

  35. Muito bom Chris
    I’m brazilian and I like the css-tricks

  36. Chris,

    I am currently set up with this gallery under my portfolio, but want to produce a FoxyCart “Add to Cart” button at the bottom of the PrettyPhoto lightbox (next to social icons). Does anyone know how to do that? See bellevuephoto.com

    Ideally it would be a form that would allow purchases of different size and cost photos.

    Thanks for all you do.

    Mike

  37. FragaGeddon
    Permalink to comment#

    Does anybody know how to make imBrowz0r sort by file name?
    Any how do I get PrettyPhoto do display images as an image gallery? Right now it just shows one image, and the ability to make it go bigger when you click the top right corner.
    Thanks

  38. Permalink to comment#

    Hi, I dont know PHP at all and can’t figure out how to make it show the file name without the extension as the caption under the thumbnail and also as the tile and alt tag. Is that possible?
    Thanks

  39. Alex

    This class is perfect for a site I’m working on for my father-in-law’s small business. I’m having some trouble implementing and should preface that I’m a total novice and have been away from any source code for a while.

    I simply tried to upload the example included in the latest release with some random photos and get the following error displayed in my browser:

    Breadcrumbs: Root

    There are 0 directories and 7 images in this directory.

    Fatal error: Allowed memory size of 18874368 bytes exhausted (tried to allocate 13056 bytes) in /hermes/bosoraweb021/b1174/ipg.comprehensiveservice/test/gallery/imgbrowz0r.php on line 480

    I’m not sure if this is an issue with my hosting service or my implementation (just dragging and dropping so far per the readme).

    Thanks

    • Alex

      never mind. I figured it out. I had to increase the memory limit on scripts set in the server’s php.ini file

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".