Stacking multiple slideshows using Jquery

Question

Hi, 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 controls 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

Answer 1

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);    }});