Cycle plugin : 4 slideshows with each fading in turn

Cycle plugin : 4 slideshows with each fading in turn


Hi

I've got 4 parallel slideshows (see below) that each contain 3 images. I would like the slideshow 1 to fade first, then slideshow 3, then 2, then 4.

I have no problem with making all 4 slideshows work at the same time but I can't make them alternate. I've been trying to use "after:" as a callback to trigger the next slideshow but every time I put in some more code the whole thing stops working !!

Has anyone got an idea for a simple way to do this ??

thanks

code :

  1. <script type="text/javascript">
    <!--
    $(document).ready(
        function() {
          $('.slideshow')
          .cycle({fx: 'fade',timeout: 5000})
          .cycle('stop');
        });

          // I was trying to call this function after starting #slide-1 but I gave up !!
        function nextImage1() {
          $('#slide-1').cycle({fx: 'fade',timeout: 5000,after: nextImage3 });
        }
      

    -->
    </script>      
     
      <div id="diaporama">
     
        <div id="slide-1" class="slideshow">
              <img src="images/diapo_1_1.jpg" width="240" height="171" />
              <img src="images/diapo_1_2.jpg" width="240" height="171" />
              <img src="images/diapo_1_3.jpg" width="240" height="171" />
          </div>
     
        <div id="slide-2" class="slideshow">
              <img src="images/diapo_2_1.jpg" width="240" height="171" />
              <img src="images/diapo_2_2.jpg" width="240" height="171" />
              <img src="images/diapo_2_3.jpg" width="240" height="171" />
          </div>
     
        <div id="slide-3" class="slideshow">
              <img src="images/diapo_3_1.jpg" width="240" height="171" />
              <img src="images/diapo_3_2.jpg" width="240" height="171" />
              <img src="images/diapo_3_3.jpg" width="240" height="171" />
          </div>
          
        <div id="slide-4" class="slideshow">
              <img src="images/diapo_4_1.jpg" width="240" height="171" />
              <img src="images/diapo_4_2.jpg" width="240" height="171" />
              <img src="images/diapo_4_3.jpg" width="240" height="171" />
          </div>
        
      </div><!-- end diaporama -->