But now it seems that Editorial now wants to run a picture page with a significant online component. So I talk a lot of trash but now it's my turn to step up and show y'all how it's done.
This is how it's done:
Notice how the thumbnails page scales with the size of your screen. Big screen, lots of thumbnails; small screen, fewer thumbnails. I do not try to jam five thumbnails across in a table because that would not work for many people. Notice how the photo takes up as much of the screen as you will give it. You cannot assume that people will have large screens, nor should you assume that people will have small screens. This design does not seriously break down until below 800x600. All the thumbnails are displayed on the left side of the screen, so you do not have to return to the thumbnails page to explore our photos. The title, photographer, and caption are clearly visible onscreen at all times. Most of the graphical elements are grayscale against a black background so that the photograph really pops. We do not have any dancing bears labeled with every state of the union offering you great mortgage rates. Every photograph has a unique and descriptive URL. It offers a photofeed/photocast compatible RSS feed [which will be better promoted]. The buttons at the bottom of the screen do not do anything, giving our users the opportunity to wonder what the Hell is going on [because it isn't done yet].
<geeky>
I put together this design in Firefox in one day. It took me another full day to get it to look the same in IE as it does in Firefox and Safari. Now I understand why photo sites are not laid out this way.
For starters, no browser will scale images to 'the largest size possible while still maintaining aspect ratio.' This seems like an oversight to me. As a consequence, the large photo is wrapped in a very small Flash stub that loads the image and scales it appropriately.
But more importantly, if you want a box to go from the top of the screen to the bottom, IE will not let you do
[box]#thumbs {
bottom: 128px;
overflow: auto;
position: absolute;
right: 0;
top: 0;
width: 256px;
}[/box]
because it is wack-ass and does not understand that top:/bottom: is a valid substitute for top:/height: and thus totally ignores the bottom: [and also, coincidentally, throws away the overflow: as well]. Thankfully, its wack-ass CSS engine will let you specify a Javascript expression for the value of a CSS attribute:
[box]#thumbs {
bottom: 128px;
height: expression('' + (document.body.clientHeight - 128) + 'px');
overflow: auto;
position: absolute;
right: 0;
top: 0;
width: 256px;
}[/box]
What the fuck is that?! Now- I have to admit that there is some perverse part of my id that expression() appeals to, but that doesn't mean that I should have had to use it.
</geeky>
At any rate- my humble contribution to online photo sharing.
- Z
_______________
- Yes, (e:ajay) - Flickr has some very cool features. I like the one where you can draw a box around the dude's johnson and totally make juvenile comments about it. If I ever took photos I would put them on Flickr just so I could do that. No I am not joking.
Don't even get me started. =)
None of the bottom buttons work yet because I spent all friggin' day trying to get the layout right in IE.
Be careful with the expression() syntax; it only works in IE5+, and only in Quirks Mode.
- Z
The phrase "IE will not let you do . . . " is something I say every single time I try to do anything cool with CSS.
What a nice solution to use the javascript in the CSS.
I like. But- the next/prev buttons didn't work me (mac firefox).