If you're still working on this, I think you may be better served using a custom "walker" - it's a WordPress class that builds the HTML output for wp_nav_menu menu items (or that's how I think of it, and use it). This means that your client can use the wonderful Appearance > Menus drag-and-drop for changing the menu and Featured Images for assigning the image, as much as they like, with no further programming required on your part. I find they make custom menus a breeze rather then a PITA, since you can choose exactly what HTML elements are included for each list item in a menu (which, in turn, makes styling a lot simpler).
In essence, you'll be making a menu that spans the page (the image will be part of the menu structure). Your general steps would be:
1) Register new menu in functions.php
2) Create custom walker
3) Filter wp_nav_menu to set the new walker
4) Select menu in your widget, or just make a custom page template
5) Set up the menu and menu items with their Featured Images
6) Style the menu appropriately, with all "thumbnails" positioned absolutely on top of each other
7) Figure out jQuery to set display:block for the img below $this (and hide all others I guess?)
8) Tell your loved one/family you'll be home early tonight. Do we need anything from the store?..
An example is the side menu here: http://emcafe.ca.
1) Register new menu in functions.php
function kwight_register_sidebar_menu() {
register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'kwight_register_sidebar_menu' );
2) Create custom walker in functions.php
class sidebar_walker extends Walker_Nav_Menu {
// copy/paste lines 67-95 of nav-menu-template.php
}
Edit that mess to keep/toss/add whatever you find valuable. Most of the magic happens towards the bottom where the $item_output variable is being assembled. Ooh, you'll probably have to stick in a
$thumb = get_the_post_thumbnail($target_id, 'thumbnail');
to use the image in your output.
3) Filter wp_nav_menu to set the new walker
function kwight_sidebar_menu_args( $args = '' ) {
$args['walker'] = new sidebar_walker;
return $args;
}
add_filter( 'wp_nav_menu_args', 'kwight_sidebar_menu_args' );
4) to 8) I'll leave up to you :)
It looks confusing, and is poorly documented (read: almost non-existant) in the Codex, but googling should turn up some helpful articles. At least this means you only have to worry about displaying the right image with jQuery, rather than fetching it, etc
