jQuery Forum

Hi there.

Im using jquery cycle to cycle through a series of post images ( 3- 5 ) the problem is that there will be multiple cycles on one page and my next/prev buttons cycle through all of the images in all of the cycles at once.

I don't want to have to add new code for each instance of the cycle...

Whats the simplest way to achieve individual next/prev buttons for each cycle...?

Heres my jquery code:

1. $(document).ready(function(){   
       $('.slides').cycle({
           fx:'scrollLeft',
           easing:    'easeInOutExpo',
           timeout:  0,
           pause:    true, 
           speed: 1000,
           pager: '#pagination',
           next: '#next_post_image',
           prev: '#prev_post_image'
       });
                      
   });
   

heres my HTML

1.       <div class="post_Image grid_7">
                           
                                    <div class="slides grid_7 ">
                                             <img src="/images">
2.                                           <img src="/images">
3.                                          <img src="/images">
                                    </div>
                              
                                   <strong><div id="pagination"></div>
                                   <span class="slide_control" id="next_post_image">&gt;</span>
                                   <span class="slide_control" id="prev_post_image">&lt;</span></strong>
          </div>