[jQuery] Re: How to load only one image at a time using JQuery Cycle Plugin?

[OutOfTouch]

I just noticed that I still need to hide everything and return false
when the "Please Select a Value is chosen in the dropdown.
The bug I am seeing in FF though is going back and forth between two
real values where I get real images loaded.

JavaScript:

var length;
var mailPieceGroups;
var slidesAdded = false;
var myFancySelector = '#' + myControlId; <--- This is something
special I have to do because ASP.Net renames control id's with a
unique name under certain circumstances. Anyways myControlId is the if
of my dropdown and is defined in a script block in the head section of
my page.

$(document).ready(function() {

        $('#nav').hide();
        $('#output').hide();

        //$('#ddlAdFundSelection').change(function(){

        $(myFancySelector).change(function(){

        var selectedValue;
        var myDataToSend;

        url: "../MyStaticPage.aspx/GetMailPieceGroupsByAdFundTypeId",
        selectedValue = $(myFancySelector).val();
        //TODO: If selectedVal = "NA" then hide stuff and return false.
        myDataToSend = "{'adFundTypeId':'" +  selectedValue + "'}"
        $.ajax({
                 type: "POST",
                url: "../Orders/Orders.aspx/
GetMailPieceGroupsByAdFundTypeId",
                data: myDataToSend,
                contentType: "application/json; charset=utf-8",
              dataType: "json",
                     //error: function(XMLHttpRequest, textStatus,
errorThrown) {alert(textStatus);alert(errorThrown); this;},
              success: function(data, textStatus){mailPieceGroups = eval('('
+ data + ')'); startSlideShow(mailPieceGroups); }
        });

        function startSlideShow(mailPieceGroups)
        {
            var html = '';
        var $slideshow = $('#slideshow').cycle('stop').empty();
        length = mailPieceGroups.length;
        for (i = 0; i < length; i++)
        {
                  //alert(mailPieceGroups[i].FileName);
                          html = '<a href="' +
mailPieceGroups[i].OrderFormUrl + '" id="orderFormUrl' + i +
                '"><img src="../Images/'+ mailPieceGroups[i].FileName + '"
id="mailPieceImg' + i +
                '" width="345" height="245" /></a>';

                        $slideshow.append(html);
        }

        $('#nav').show();

        $('#slideshow').cycle({
                 fx:     'fade',
                speed:  'slow',
                timeout: 0,
              next:   '#next',
                prev:   '#prev' ,
             startingSlide: 0,
            after: onAfter
        });

        function onAfter()
        {
           var index = $(this).parent().children().index(this);
           $('#output').show();
          //alert(index);
           $('#description').text(mailPieceGroups[index].Description);
          $('#priceInfo').text(mailPieceGroups[index].PriceDescription);
        };

     }; // End StartSlideShow

    //alert(myDataToSend);

    }); // End Changed Function

});

If I post it all it will just add to the confusion so here is the
relevant html.
HTML:

<p class="teaser" style="text-align:center;">
            <strong>
                Click on the image for the mail piece group you want
to order.&nbsp;
            </strong>
                        </p>
                        <div id="nav" class="nav">
                                <a id="prev" href="#">Prev</a>
                                <a id="next" href="#">Next</a>
                        </div>
                        <div id="slideshow" class="pics">
                        </div>
                        <br />
                        <br />
                        <div id="output">
                                <p id="description">Description Goes Here</p>
                                <p id="priceInfo">Price Goes Here</p>
                                <p>(SomeMoreText Here)</p>
                        </div>


Thanks for your help.