Stacking multiple slideshows using Jquery

JQuery newbie here! I'm having difficulty stacking more than one slideshow with each it's own individual controls. The one slideshow works just fine.

However, when I add another slideshow I lose the cont开发者_如何学Pythonrols and title for that one. link: http://dl.dropbox.com/u/1466448/numbered/stack.html

I read on other related posts about using a unique ID for each slideshow but I have very limited experience in jquery to understand that approach. Any help would be greatly appreciated.

Thanks! -Thai

In your HTML, you have two sets of divs right? Both of them have id="slideshow" and a sibling with id="title".

Try taking the second set of divs, and re-iding them to slideshow2 and title2. It should look like this:

<div align="center"> 
<div id="demo"> 
    <div align="left" id="slideshow2" class="pics"> 
        <img src="images/nature/snow.jpg" alt="Snowy fied"/> 
        <img src="images/nature/city.jpg" alt="Furtistic City"/> 
        <img src="images/nature/sea.jpg" alt="By the sea"/> 
     </div> 
     <div align="left" id="title2"></div> 
</div> 
</div> 

Then copy and paste your javascript for them, changing the references there. Your second copy should look like this:

$(function() {            
  $('#slideshow2').after('<div id="nav2" class="nav">').cycle({        
    fx:     'fade',        
    speed:  'slow',
    timeout: 0*1000,
    pager:  '#nav2',
    before: onBefore    });            
  function onBefore() {        $('#title2').html(this.alt);    }});