Advice on general way this wizard form should be layed out....

Question

I'm doing a wizard form with about 5 steps where you build a product by choosing items from different categories at each step. In each step, the user will be presented with a list of multiple items each with item name, small preview image and a checkbox to select. On mouseover of an individual item, I'd like to display a larger image and product details in a "More Info" area that exists in each step of the wizard.

So my first guess at this is to load all the items into an collection of some sort, and then at runtime, depending on the current step, I would kind of inject the appropriate html into the items list DIV (I would have the item id, name, description, smallimageurl, largeimageurl on my item javascript class), and then attach a mouseover function to all those elements which would make the larger image andaccompanying info appear in the More Info div.

Does this seem like a reasonable approach or am I way off base? I can see how in certain steps I may want a different UI...so should a person build these different UI elements at design time in seperate div's and then display them accordingly?

Any pointers or links to good articles you've encountered would be awesome....

Answer 1

Why reinvent the wheel if you can use wizard plugin.

Answer 2

I ended up going with easy slider, for no particularly good reason: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

It's quite nice, but I'm not sure if it supports next/previous buttons at the same time as displaying current step (seems to be one or the other).

So I'll post my code here in case it helps someone out.
Basically, on hover over any radio button or checkbox, I load the "Additional Info" for that item into an informational div. For demo purposes I just load a random image, but loading a contextually proper one would probably be a minor change. (I need to figure out how to have all my radio and checkbox elements defined in object arrays with .label, .additionalInfo, and .imageURL properties and load them appropriately at runtime, but that's an exercise for another day).

<link href="Scripts/easyslider1.7/css/screen.css" rel="stylesheet" type="text/css" />
<script src="Scripts/easyslider1.7/js/jquery.js" type="text/javascript"></script>
<script src="Scripts/easyslider1.7/js/easySlider1.7.js" type="text/javascript"></script>
<script src="Scripts/jquery.lorem.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("#slider").easySlider({
                prevId: 'prevBtn',
                prevText: 'Previous',
                nextId: 'nextBtn',
                nextText: 'Next',
                controlsShow: true,
                controlsBefore: '',
                controlsAfter: '',
                controlsFade: true,
                firstId: 'firstBtn',
                firstText: 'First',
                firstShow: false,
                lastId: 'lastBtn',
                lastText: 'Last',
                lastShow: false,
                vertical: false,
                speed: 200,
                auto: false,
                pause: 2000,
                continuous: false,
                numeric: true,
                numericId: 'controls'
            });

            // set hover event on the **label** accompanying any radiobutton or checkbox:
            // todo: is it possible to attach this to the actual radiobutton at the same time?  How???
            $(":radio, :checkbox").next().hover(function() {
                // SET THE EXTRA INFO TITLE TO THE TEXT OF THE RADIO/CHECKBOX LABEL:
                $('#extraInfoDetail').html(this.innerHTML);         //innerHTML or innerText would work (i think)

                // SET THE DETAIL ITEM INFO, JUST USING LORUM IPSUM (for demo purposes):
                $('#extraInfoLongText').lorem({ type: 'paragraphs', amount: '2', ptags: true }); 

                // JUST SOME RANDOM NUMBER TO DISPLAY AN ARBITRARY IMAGE:
                var randomNum = Math.floor(Math.random() * 3) + 1;
                var imagesrc
                imagesrc = "~/../Images/" + randomNum + ".jpg"; //todo: wtf is up wit this weird notation??
                $('#extraInfoImage').attr({ 'src': imagesrc });
            },
                // CLEAR EVERYTHING OUT AFTER HOVER OFF:
            function() {
                $('#extraInfoDetail').html('');
            }
        );
        }); 
    </script>

...the relevant html:

        <div id="extraInfo" style="width:400px; float: left;">
            <div id="extraInfoTitle" style="background-color:Yellow; font-size:20px">ITEM DETAILS</div>
            <div id="extraInfoDetail" style="background-color:Fuchsia; font-size:20px"></div>
            <img id="extraInfoImage" src="Images/marc-faber.jpg" alt="" /><br />
            <div id="extraInfoLongText"></div>
        </div>