More than one slideshow on one page using jQuery

Is it possible to create more than one slideshow (each slideshow having a different set of images, of course) on the same web page using jQuery (or some similar package)? If so, how?

All tries so far failed because all images were either shown in both slideshows, the numbering开发者_如何学C was incorrect or other interference effects occured.

Yes, it's possible.

I've had good results using the Coda Slider code from here: http://www.ndoherty.biz/demos/coda-slider/2.0/

The code would look something like this, where a panel is one of the items in your slider:

<div class="slider-wrap">
  <div id="slider1" class="csw">
    <div class="panelContainer">                
      <div class="panel" title="Panel 1">

You can also make them yourself using appropriate CSS, JS and jQuery with plugins like http://gsgd.co.uk/sandbox/jquery/easing/ to help with creating smooth looking animations.

yes, I used the Cycle plugin at: http://malsup.com/jquery/cycle/

I nested each of my img in two divs and two divs to wrap things up...

<div id="before_window_wrapper">
  <div name="before_n_after_window">

    <div id="before_slide_wrapper">
      <div id="before_slide">
        <img src"my/image/directory/1.img"/>
      </div>
    <div id="slide_comment">
      <h3>person comment for this img goes here</h3>
    </div>

  </div>
</div>

<div id="before_slide_wrapper">
  <div id="before_slide">
    <img src"my/image/directory/3.img"/>
  </div>
  <div id="slide_comment">
    <h3>person comment for this img goes here</h3>
  </div>
</div>

and:

  <div id="after_window_wrapper">
    <div name="before_n_after_window">

      <div id="after_slide_wrapper"> 
        <div id="after_slide">
          <img src"my/image/directory/2.img"/>
        </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

    <div id="after_slide_wrapper">
      <div id="after_slide">
        <img src"my/image/directory/4.img"/>
      </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

  </div>
</div>

the children of "before_n_after_window" are the divs that are being cycled:

$("#before_n_after_window").each(function(index){
  $(this).cycle();
});

The slide wrappers (before_slide_wrapper and after_slide_wrapper) are under cycle()'s complete control -fine. However, any thing nested inside of it is not, so you can place more siblings for the slides(before_slide and after_slide) - hence the "#slide_comment" div.

"before_n_after_window" is only under semi-control of cycle(), and uses your css code that doesn't conflict with its own. "#before_window_wrapper" and "#after_window_wrapper" are under your complete control(css-wise).

Now that you have"#before_n_after_window" and its children, simply iterate through them and name and point the controls for each pair:

var i = index;
var current_slide = $(this);

// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);

$(current_slide).cycle({
  fx:    'fade',
  pager:    '#nav_' + i,
  prev:     '#previous_button_' + i,
  next:     '#next_button_' + i,
});

// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
  $(current_slide).cycle('resume', true); 
  $('#pause_button_'+i).show();
  $('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() { 
  $(current_slide).cycle('pause'); 
  $('#pause_button_'+i).hide();
  $('#play_button_'+i).show();
});

You must follow the naming convention above or any other you may decide on. the actual controls can be be place anywhere except inside the windows - bug issues.

On a side note, I set these pairs to pause immediately after they've been cycled because I didn't want several slide running on on page. I wanted the user to choose which one to cycle. Also, I have to find a way to turn off any other cycles that may be running. However:

if(better_solution){
  return please_post;
}