Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

eBay ebay Pure-CSS Photo Gallery

Filed in:CSS
Web Dev·XHTML·ArtiZines

eBay ebay Pure-CSS Photo Gallery

August 6th, 2010  · stk

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,
  • doesn't rely on JavaScript,
  • is cross-browser compatible and
  • contains error-free, web-standard XHTML and CSS code.

In short - it rocks!

My Randsco | Slide Shows | Adventures | News | Contact | About
eBay photo gallery

eBay Photo Gallery

Welcome! Sign in or register.

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.

The gallery offers many improvements over the one that eBay is (at print time) using. Most notably, because this gallery is pure-CSS, it works whether JavaScript is enabled or disabled (i.e., it's accessible to all). It also provides an option to utilize two photos, one for the thumbnail image and a different one for the zoom. (All the images in this demo use two photos).

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).

Disclaimers

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.

By demonstrating a superior, pure-CSS photo gallery, I am not trying to poke fun of eBay, eBay employees or their heirs and/or assigns. I'm sure eBay has hired a very talented team of web professionals - people who really like JavaScript. Heck, they were probably under strict instructions to make a gallery that relied on JavaScript, for all I know. Still, it would be nice for them to fix all the HTML and CSS errors, as well as allow JavaScript-challenged individuals to view the galleries. I don't think this is asking too much. If I can do it, surely their talented team can too - right?

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.

Thanks!

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.

Randsco eBay GuaranteeWe'll cover your purchase price plus original shipping.

Copyright © 1999-2010 Randsco. All Rights Reserved. Designated trademarks and brands are the property of their respective owners. Use of this website constitutes acceptance of the Randsco User Agreement and Privacy Policy.

(Permalink)
Views: 6415 views
5 Comments · EmailThis · GuestBook

Updated: 9-Aug-2010
Web View Count: 6415 viewsLast Web Update: 9-Aug-2010

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Leen Comment
09/24/10
I'd like to work with two pictures at one time. Is this possible? When on mouse over he shows two pictures?
2.flag stk Comment
09/24/10
Leen ... anything is *possible* email me ;-)
3.flag Skovd Comment
12/06/10
hi there...

i cant find out how to use the code or even see what part of it i need to use... so i wanted to hear if u can help me with the code?
4.flag stk Comment
12/06/10
Skovd - Sounds like you'll need help. Is this for a personal website or commercial? Please email.
5.flag Skovd Comment
12/21/10
Srry for an very very late answer....

Its going to be used on a small website that a friend want me to make and se is selling some cloth, bags, and other stuff, its not a big shop she wants, just so see can be heard i bit more than only own her friends..