Content

• Home
• Action
• Blogging
• Croydon Residents Against Parking Plans
• CSS
• Flashmobs
• Gallery
• Garden Project
• Holidays and trips
• Life
• Listening
• Media Management MA
• News
• Opinion
• Pittock Reunion
• Rants
• Reading
• Simon Cox's
• Standards
• Tech
• Tickled
• Watching
• Web
• Webcam
• All entries
• Tag Cloud
• Loxley Barton Falls

Webcam

Home » Web » Standards » CSS » Picture gallery slide image

« A very long engagement | Main | The news that never was »

Picture gallery slide image

I have been toying with this one for well over a year now. I moved all my photos off this site and onto Pixagogo, a paid service with no limits to disk space - I'm already up to 3GB. One of the little features of Pixagogo is that I can show a random image from the gallery here as an image. Great thinks moi and that's what I show when I have made a new album on Pixagogo.

Then I read Eric Meyers book, More Eric Meyer on CSS, a good read. Eric has a chapter about turning lists into a gallery - Styling a Photo collection. It a very good tutorial and uses an image of an old slide mount to show your thumbnail off and I had my own variant up and running in no time.

However there was a problem. It used a different class for landscape and portrait images. That's not a problem for most folks but my random image from Pixagogo could be either landscape or portrait. So I spent the next eleventy three months trying to work out how to centre an image with a variable width and height inside another box.

In the end I opted for a simple table where I could use:
td align="center" valign="middle". I really do wish that I could have used pure css but this was one instance where it just didn't cut the mustard.

Meanwhile I had been working on my slide case design. I built the slide with rounded corners and a drop shadow to show the edge:

Then I embellished it:

This is used as the background to the table cell and the image, portrait or landscape just sits centrally in the table cell.
If anyone can do this using CSS please let me know how!

And the final finished example (reload the page to see a different image in there):

For utter inspiration you must see Douglas Bowmans superb Gallery. I love the styling.

Posted by Simon at January 31, 2005 8:46 PM

---

Trackback Pings