#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:
Running Time: 23:10
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
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.
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. ;)
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?
I think if you are already using WordPress it would behoove you to use a plugin like the NextGEN Gallery, which is a full-featured thing that I’m sure you’d be happy with: http://wordpress.org/extend/plugins/nextgen-gallery/
Thanks Chris!
It worked great!
Tenzin
Excellent!
Perfect timing as well Chris.
Just this weekend my friends dad wanted to put together a photography website, this should help a ton.
Did you come across an option to deal with the alt attribute it’s outputting? Looks like the cached file name or something.
I create one html-document per photo. That’s why my photos are no. 1 in the Google picture index.
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.
Correct URL to Gallery is http://gallery.menalto.com/
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?
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
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?
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.
I’ll watch it again tomorrow and figure it out
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 …
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.
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]
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.
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?
They are on Howcast as well, if that’s better for you: http://www.howcast.com/videos/191607-64-Building-a-Photo-Gallery
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.
So many mistakes the comment is! I am sorry!
Happy to see prettyPhoto featured into this screencast.
Also, thanks for the layout bug, wasn’t aware of it ;)
Just in time. Started working on a gallery last week. This will help a lot!
Parse error: syntax error, unexpected ‘=’, expecting T_STRING in …/inc/imgbrowz0r.php on line 35
all i get is this :(
Post you error and config here: http://forum.61924.nl/viewforum.php?id=4
I’ll try to help you.
awesome! thanks, i’ll be right over :)
Hi jozue06,
I had that error to and after a lot of head scratching and frustrations realised my server was using PHP 4 and the script needs your hosting to be running PHP 5.
Fortunately I use media temple and it took me two mintutes to change that and it worked right off…
now if there was a way to adapt this so you could use a flickr gallery, I’d be right as rain
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?
The Flash movie player I mean doesn’t work on windows
I must say. Absolutely perfect timing. My friends gonna come over today evening to talk about his photography gallery site.
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.
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?
[solved] I somehow worked out a good alternative.
Hi Patte could you show me your code for how you solved this? Much appreciated!
Sorted it: set the .img-breadcrumbs class to inline.
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.
ah… found it… exchange your curly braces with normal ones.
‘images_dir’ => dirname(__FILE__).’/gallery’,
‘cache_dir’ => dirname(__FILE__).’/cache’,
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?
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.
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…
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!
UPDATE – Works OK in IE8
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.
This is brilliant. Again Chris you’ve helped me build something pretty.
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