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:
#64: Building a Photo Gallery
Chris Coyier
on
(Updated on )
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
Of cause NextGEN is great example. But what if you wanna something like this in WordPress? Is the only way to get that is to develop your own plugin for WordPress?
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:
https://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.
https://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
Muito bom Chris
I’m brazilian and I like the css-tricks
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
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
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
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
never mind. I figured it out. I had to increase the memory limit on scripts set in the server’s php.ini file
hello,
just saw your videos ,really very helpful..been new in html und css ,i would like to ask how one can make a photo gallery with the perfect spacing using html ..
thanks