Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
eBay Pure-CSS Photo Gallery
What's more fun for a developer than to show up a huge online company like eBay? How about getting PAID to do it! Here's the write-up from my one, fun summertime web project - a pure CSS eBay photo gallery. (Oh and just for grins, it's displayed in another "Arti-zine" web design). I miss having time to write more blog articles!!
This summer, I have concentrated on work around the house and property (living the real life, as opposed to a virtual life). It keeps my wife happy(er), but it means a lot fewer web projects and contributions to this website.
One of the web projects that I did take on, however, was a fun one. A British web developer and programmer, had a client that wanted a photo gallery "like the eBay photo gallery" for his online auction site. The rub? They wanted a pure-CSS version.
Because it's fun to show a well-known online powerhouse how the web should work - and because there was development funding - I dived into the project enthusiastically. (Ahem - only after my daily, real life chores were complete).
The result - A pure CSS photo gallery that looks identical to the eBay gallery and which has significant improvements:
- It's completely accessible,
- is cross-browser compatible and
- contains error-free, web-standard XHTML and CSS code.
In short - it rocks!
About this Design
The design is simple - spoof an eBay gallery page. What's not simple is incorporating a fixed-width layout, the pure-CSS eBay-like gallery and various spoof elements into a regular blog post. We call the result an "Arti-zine", which is a Randsco exclusive. You might enjoy looking at the diversity of our other arti-zine articles.
Because the page is a spoof, many of the elements that make the page "look like a real eBay page" don't function (i.e., the header and results sections are just images blatantly swiped from the eBay page). However, the pure-CSS photo gallery is real.
Speaking of images, the demo images were also swiped from eBay (and edited). Editing 60 images can be a tad boring, so some humorous captions were added, in the name of interest. (Have a look and see if you find my lame humor remotely funny).
Any resemblance to the actual eBay gallery is purely intended, as that was kind of the whole point. However, all the images, logos and trademarks belong to their respective owners.
Though this page has been tested in a variety of browsers - IE6, IE7, IE8, IE8 (Compatibility mode), Chrome 4, FireFox 3.6, Opera 10, winSafari, Flock, Netscape and macSafari - we make no promise that it will work flawlessly in whatever browser you are currently using. However, because I'm a nice guy and care about my work, could you drop me a line and let me know: What browser, version and "the symptoms" (what's not working)? Or leave a comment below.
Usage & Copyright
Of course, you're dazzled by this spiffy photo gallery and can't wait to use it in your personal website, your client's business site or your dynamically-generated web application! Well, good news! We have a generous copyright policy. In short, this gallery code (XHTML + CSS) is free to use on your personal website! Of course, we do take (and like) donations, backlinks and other forms of "thanks".
Commercial Use is a different story, as we require a donation if you're using the code for commercial purposes (i.e., trying to make money).
Deployment of the code, whether for personal or commercial purposes, is entirely up to you. Rather than swipe the code from this location, I'd recommend that you look at the original gallery page (as it is a stand-a-lone demo and doesn't have all the overriding CSS required to embed the gallery into our blog application).
Of course, you can always hire me to deploy the gallery for you. Just contact me and we can work out some kind of a deal. I've worked for Compact Discs, Persian rugs, a MacBook and even - gasp - for money ... so feel free to contact me. I'm a real person with banking needs, just like you.