First Class Fence

First Class Fence
After much work back and forth, First Class Fence finally went live this week.This site uses the HTML5 Boilerplate, with frequent use of Modernizr tests and image replacement — in this case, to avoid adding unnecessary images to printouts. There’s no responsive design, but a custom print stylesheet from the Boilerplate is used. The header navigation submenus are pure CSS.

As far as JavaScript and jQuery goes, the showpiece of this site is the product gallery. Divided into residential, commercial, and access control, the galleries are generated from a fairly straightforward MySQL database (which I built using my own quickie PHP tool). The links on the left side show and hide relevant thumbnails.

Clicking any thumbnail hides the gallery and reveals a larger image. This large image is generated dynamically so that users don’t have to load any images they haven’t asked for. From there, users can page left and right through the large images or return to the gallery of thumbnails. Sub-galleries and large images both generate their own unique URLs using hashes for bookmarking or emailing.

Leave a Reply

Your email address will not be published. Required fields are marked *