Pure CSS, eBay-like Photo Gallery

About the Gallery:

This page is a demonstration of a pure-CSS version of an eBay-like product gallery page (e.g., Contemporary paintings). The eBay page requires JavaScript and fails miserably if a visitor has disabled JavaScript (people often disable JavaScript for security reasons or they may be browsing from a corporate location).

The gallery window is a fixed-width display (930px including a 2px border, or 926px excluding the border). It has a left-hand sidebar that is 189px-wide, which includes 5px padding left and right. This leaves a 737px viewport for the actual gallery. Gallery thumbs are 100px square (98px without border) and zoomed images are 300px square (298px w/out border). Note: separate thumbnail and zoomed images are used for each "item".

The default gallery includes 10 rows (60 items) and includes two other user-switchable display options (i.e., 15 rows or 90 items; and 20 rows or 120 items).

Changes & Improvements from the eBay Gallery:

Unlike the eBay page, this page is written using web standards and doesn't utilize tables for layout. The eBay page (HTML 4.01 Trans DocType) contains 236 Errors & 2 warnings. The eBay page also contains 12 CSS errors & 1180 warnings.

Improvements & Compromizes:

Valid CSS! Valid XHTML 1.0 Strict

  1. Pure CSS (Not dependent upon JavaScript)
  2. Tables are not utilized for layout
  3. Valid, standardized HTML (XHTML v1.0 Strict)
  4. Valid, standardized CSS (CSS v3.0)
  5. No JS fade-in/out (easy enough to enhance w/JavaScript)
  6. Zoomed image offset more from thumb (mouseover anchor requirement)
  7. Zoomed image placement hardwired (no JavaScript viewport "sensing")