JQuery script that allows the user to flip between a list-view mode and and "icon"-view mode. Includes a fade transition to ease the effect. It also limits the height of the items (in both list and icon view - though this is easily changed) so all items appear inline. Most of this is based solely on the CSS and how it changes the layout. jQuery is just the catalyst.

Demo

Check out the View Mode Switcher in action

Why no plugin?

Because, 1.) This is pretty basic stuff, I may make one down the road but it seems kind of pointless and 2.) This is something that should be highly customized, or could be used on an existing project (as I'm planning to do).

Download

Download the View Mode Switcher. Includes HTML, CSS, and JS as well as overlay images for fade effect.

State Maintenance

I didn't include this in the core for simplicity sake, but I've created a PDF explaining how to maintain state (using cookies) so if a user navigates to another page on the site with the same setup their view preference is maintained. This could also be done using AJAX and session vairables, or many other techniques, but this should at least demonstrate how this can be accomplished.

Please Note:

This script is NOT production ready, it's an example of how to use the code, you'll want to run the obvious browser checks after you implement it in a customized setting.  For simplicity I've not added fixes for - say - IE6, which will have an issue viewing it due to the alpha-transparent PNG's.  Finishing touches like that are up to you.