[jQuery] multiple jquery cycle slideshows behaving strangely

[natural]

Hi

I have adapted a script found in the cycle demo website, to add
multiple slideshows to a page, however, I am experiencing a problem.

Just to be clear, I have hard-coded 2 sets of divs in my html, with
correct ids for the slideshow div and the slideshow buttons UL. Here
is an example of one of them:


<div>

        <div class="column780px">

                <div class="slideshowcontrols">

                        <div class="play"><a href="#" title="Play 
slideshow">Play slides</
a></div>

                        <ul id="sb1" class="slideshowbuttons"></ul>

                </div>

                <div class="clearer"></div>

                <div class="slideshowarrow"><img src="support/img/slideshow/bg-
slideshow-arrow.png" alt="&nbsp;" /></div>

                <div id="s1" class="slideshow">

                        <img src="support/img/test/test-picture-1.png" 
alt="test" />

                        <img src="support/img/test/test-picture-2.png" 
alt="test" />

                        <img src="support/img/test/test-picture-3.png" 
alt="test" />

                        <img src="support/img/test/test-picture-4.png" 
alt="test" />

                </div>

        </div>

</div>



And here is my JS:


// redefine Cycle's updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex){$
(pager).find('li').removeClass('activeLI').filter('li:eq('+currSlideIndex
+')').addClass('activeLI');};

// Temporary value for numer fetched from db
var total = 2;
var slideshowcontainer = "";
var slideshowbuttons = "";

for(var a=1;a<= total;a++)
{
        slideshowcontainer = "#s"+a;

        slideshowbuttons = "#sb"+a;

        // Setup slideshow
        $(function(){$(slideshowcontainer).cycle({fx:'fade',pause:1,timeout:
3000,speed:500,pager:slideshowbuttons,pagerAnchorBuilder:
function(idx, slide){return '<li><a href="#"></a></li>';}});});
}


This does something strange. On the page, the last instance of the
slideshow has the total number of buttons of all slideshows. It works,
but only loops for the number of images in it's div (even though it
has many more buttons).

The other slideshows have no buttons, and in fact do not work at all -
they degrade, that is to say that the images display as normal images
(all images in each slideshow visible on the page), as if the function
were ignoring all but the last slideshow.

Any ideas would be greatly appreciated as there is much hair-pulling
happening here.

Many thanks in advance.