I am looking to build a gallery with CSS do any of you WEbmaster-talk members know of any good examples I can look at for inspiration.

Ideally something with thumbnails that will also show larger graphics if required.

Once I have the larger graphic I can either still show a small list of small thumbnails or perhaps scroll through graphics

I need inspiration & ideas & wondered if anyone had seen a good gallery they might share with me.

Thankyou very much & Happy New Year (if somewhat belated)

Tonya

well if you want thumbnails that enlarge when you click, you need java, and it you want thumbnails with a large pic that changes when you mouse over, you need java

Yes, try something called LIGHTBOX: http://www.huddletogether.com/projects/lightbox/

Easy to implement, has some very versatile options, and it's very cool too

You could also look at Moo.fx, they have a sweet slideshow. I don't know if that's what you meant, but its really cool.

http://www.mooshow.eatpixels.com/

carter

I am going to be using ASP or PHP to pull the graphics from a predetermined folder. I already have something in place that works fine (no java in sight!) (perhaps a wee bit of javascript maybe ) but wanted to change the old table layout for something more CSS - thanks for the heads up on two great examples.

LadynRed - I love the lightbox - will defo be giving this a whirl !

Carerdea - I like the mooshow but I can achieve something like this is ASP using calls for info to the server or a dataset - It was the layout ideas that I really wanted to look for.

My customer has a nightclub that they have wanted a gallery for ages for. They are not that IT literate so I want a way of dumping pics in a folder then dynamically creating a gallery from them.

Since i am a web engineer primarily not a fuzzy front end graphics buff I have no problem with the server side dynamic code it is the appearance of it that I need inspiration for. Having spent time recently trying to convert my web designing to CSS without tables for layout (LadyNRed been lots of help here) I really dont want to fall back on tables for the gallery so any more cool inspiration layouts for galleries out there let me know !

have a look at www.cssplay.co.uk

under the demos page there is a host of ways of displaying photos all using just css. Its a real eye opener as to what can be achieved.

By far the greatest I have ever used is singapore image gallery.

http://www.sgal.org/

Multiple sub-gallery's allowed, neat image comments script, image re-size, image water mark.

And a very very clean layout, which is very easy to edit if you no css.

Thanks for all the advice. In the end I hand scripted some ASP code and combined the above suggested lightbox for the larger image view.

The gallery now automatically using the filesystem object in asp to list all images listed in a folder (which I have also dynamically listed) and displays the image as a thumbnail.

The only proviso is that I use a program (I use picasa gallery) to just quickly resize the images I have - when they come off the camera they are huge & far too big to view on a website comfortably. Picasa does this really quickly so all I have to do now is make a folder dump my pics in it resize them and the code does the rest

http://www.tonya.me.uk/gallery/galleries.asp

The lightbox code was really easy and looks fab so thanks to ladyNred for her advice.

Looks pretty good Tonya - but, since your site is using XHTML, you might want to fix your code warnings for validation:

line 54 column 62 - Warning: <br> element not empty or not closed
line 54 column 67 - Warning: <br> element not empty or not closed
line 58 column 101 - Warning: <img> element not empty or not closed
line 58 column 18 - Warning: missing </div>
line 58 column 384 - Warning: <img> element not empty or not closed
line 58 column 310 - Warning: missing </div>
line 58 column 650 - Warning: <img> element not empty or not closed
line 58 column 577 - Warning: missing </div>
line 58 column 913 - Warning: <img> element not empty or not closed
line 58 column 842 - Warning: missing </div>
line 58 column 1095 - Warning: missing <tr>
line 58 column 1186 - Warning: <img> element not empty or not closed
line 58 column 1112 - Warning: missing </div>
line 58 column 1459 - Warning: <img> element not empty or not closed
line 58 column 1377 - Warning: missing </div>
line 58 column 1743 - Warning: <img> element not empty or not closed
line 58 column 1666 - Warning: missing </div>
line 58 column 2021 - Warning: <img> element not empty or not closed
line 58 column 1940 - Warning: missing </div>
line 58 column 2217 - Warning: missing <tr>
line 58 column 2317 - Warning: <img> element not empty or not closed
line 58 column 2234 - Warning: missing </div>
line 58 column 2602 - Warning: <img> element not empty or not closed
line 58 column 2527 - Warning: missing </div>
line 58 column 2871 - Warning: <img> element not empty or not closed
line 58 column 2796 - Warning: missing </div>
line 58 column 3142 - Warning: <img> element not empty or not closed
line 58 column 3065 - Warning: missing </div>
line 58 column 3331 - Warning: missing <tr>
line 58 column 3427 - Warning: <img> element not empty or not closed
line 58 column 3348 - Warning: missing </div>
line 58 column 3710 - Warning: <img> element not empty or not closed
line 58 column 3634 - Warning: missing </div>
line 58 column 3976 - Warning: <img> element not empty or not closed
line 58 column 3906 - Warning: missing </div>
line 58 column 4237 - Warning: <img> element not empty or not closed
line 58 column 4165 - Warning: missing </div>
line 58 column 4420 - Warning: missing <tr>
line 58 column 4511 - Warning: <img> element not empty or not closed
line 58 column 4437 - Warning: missing </div>
line 58 column 4781 - Warning: <img> element not empty or not closed
line 58 column 4707 - Warning: missing </div>
line 58 column 5045 - Warning: <img> element not empty or not closed
line 58 column 4977 - Warning: missing </div>
line 58 column 5303 - Warning: <img> element not empty or not closed
line 58 column 5225 - Warning: missing </div>
line 58 column 5501 - Warning: missing <tr>
line 58 column 5585 - Warning: <img> element not empty or not closed
line 58 column 5518 - Warning: missing </div>
line 58 column 56 - Warning: <a> escaping malformed URI reference
line 58 column 101 - Warning: <img> escaping malformed URI reference
line 58 column 101 - Warning: <img> lacks "alt" attribute
line 58 column 348 - Warning: <a> escaping malformed URI reference
line 58 column 384 - Warning: <img> escaping malformed URI reference
line 58 column 384 - Warning: <img> lacks "alt" attribute
line 58 column 615 - Warning: <a> escaping malformed URI reference
line 58 column 650 - Warning: <img> escaping malformed URI reference
line 58 column 650 - Warning: <img> lacks "alt" attribute
line 58 column 880 - Warning: <a> escaping malformed URI reference
line 58 column 913 - Warning: <img> escaping malformed URI reference
line 58 column 913 - Warning: <img> lacks "alt" attribute
line 58 column 1150 - Warning: <a> escaping malformed URI reference
line 58 column 1186 - Warning: <img> escaping malformed URI reference
line 58 column 1186 - Warning: <img> lacks "alt" attribute
line 58 column 1415 - Warning: <a> escaping malformed URI reference
line 58 column 1459 - Warning: <img> escaping malformed URI reference
line 58 column 1459 - Warning: <img> lacks "alt" attribute
line 58 column 1704 - Warning: <a> escaping malformed URI reference
line 58 column 1743 - Warning: <img> escaping malformed URI reference
line 58 column 1743 - Warning: <img> lacks "alt" attribute
line 58 column 1978 - Warning: <a> escaping malformed URI reference
line 58 column 2021 - Warning: <img> escaping malformed URI reference
line 58 column 2021 - Warning: <img> lacks "alt" attribute
line 58 column 2272 - Warning: <a> escaping malformed URI reference
line 58 column 2317 - Warning: <img> escaping malformed URI reference
line 58 column 2317 - Warning: <img> lacks "alt" attribute
line 58 column 2565 - Warning: <a> escaping malformed URI reference
line 58 column 2602 - Warning: <img> escaping malformed URI reference
line 58 column 2602 - Warning: <img> lacks "alt" attribute
line 58 column 2834 - Warning: <a> escaping malformed URI reference
line 58 column 2871 - Warning: <img> escaping malformed URI reference
line 58 column 2871 - Warning: <img> lacks "alt" attribute
line 58 column 3103 - Warning: <a> escaping malformed URI reference
line 58 column 3142 - Warning: <img> escaping malformed URI reference
line 58 column 3142 - Warning: <img> lacks "alt" attribute
line 58 column 3386 - Warning: <a> escaping malformed URI reference
line 58 column 3427 - Warning: <img> escaping malformed URI reference
line 58 column 3427 - Warning: <img> lacks "alt" attribute
line 58 column 3672 - Warning: <a> escaping malformed URI reference
line 58 column 3710 - Warning: <img> escaping malformed URI reference
line 58 column 3710 - Warning: <img> lacks "alt" attribute
line 58 column 3944 - Warning: <a> escaping malformed URI reference
line 58 column 3976 - Warning: <img> escaping malformed URI reference
line 58 column 3976 - Warning: <img> lacks "alt" attribute
line 58 column 4203 - Warning: <a> escaping malformed URI reference
line 58 column 4237 - Warning: <img> escaping malformed URI reference
line 58 column 4237 - Warning: <img> lacks "alt" attribute
line 58 column 4475 - Warning: <a> escaping malformed URI reference
line 58 column 4511 - Warning: <img> escaping malformed URI reference
line 58 column 4511 - Warning: <img> lacks "alt" attribute
line 58 column 4745 - Warning: <a> escaping malformed URI reference
line 58 column 4781 - Warning: <img> escaping malformed URI reference
line 58 column 4781 - Warning: <img> lacks "alt" attribute
line 58 column 5045 - Warning: <img> escaping malformed URI reference
line 58 column 5045 - Warning: <img> lacks "alt" attribute
line 58 column 5263 - Warning: <a> escaping malformed URI reference
line 58 column 5303 - Warning: <img> escaping malformed URI reference
line 58 column 5303 - Warning: <img> lacks "alt" attribute
line 58 column 5585 - Warning: <img> lacks "alt" attribute

he he he - yeah wow I should do really shouldnt I. Thanks for the heads up I will do a bit of checking one night. Cheers

The only thing I will add is that if some of these tags are hidden in the asp will this make a difference to them not being picked up - perhaps I need to check my asp & see what is being delivered in all cases by the server & make sure tags are not being missed out. Since I use a HTML editor its hard not to close tags as they are automatically entered by the program but when I stitch in my handwritten asp I might have deleted a few out or moved them by mistake. Will check my code & thanks for the heads up as I said.