problem with jquery slide show
<p>Basically I have different images for different months in the year, what I'm trying to do is to click on a certain month and have a slide show of the images related to that month on top of the page, <a href="http://www.faithinstyle.co.uk/test/gallery.php" rel="nofollow">link text</a>(this is for testing purposes),</p>

<p>but the problem is that when I click on first month (Jan) I get images of the next month in the slide show as well and when I click on the second month I get no pictures, I can't seem to fix this problem, any help would be appreciated,</p>

<p>if it's too much trouble troubleshooting the code, how can I do something like that, (i.e. different slide shows for different months of the year).</p>

<p>thanks </p>

<pre><code>&lt;div id="main_content"&gt;

    &lt;div id="gallery_page"&gt;
        &lt;div class="slide"&gt;
            &lt;span id="first"&gt;&lt;p&gt;Jan 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="second"&gt;&lt;p&gt;Feb 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="third"&gt;&lt;p&gt;March 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="forth"&gt;&lt;p&gt;April 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="fifth"&gt;&lt;p&gt;May 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="sixth"&gt;&lt;p&gt;June 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="seventh"&gt;&lt;p&gt;July 2008&lt;/p&gt;&lt;/span&gt;
            &lt;span id="eighth"&gt;&lt;p&gt;August 2008&lt;/p&gt;&lt;/span&gt;
    &lt;/div&gt;
        &lt;div class="slide"&gt;
            &lt;span id="ninth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="tenth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="eleventh"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="twelvth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="thirteenth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="fourteenth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="fifteenth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
            &lt;span id="sixteenth"&gt;&lt;p&gt;Feb 2007&lt;/p&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id="main_gallery_pics2"&gt;
            &lt;div class="slide2"&gt;
                &lt;img src="images/gallery/feb2008/dal.jpg" /&gt;
            &lt;/div&gt;
            &lt;div class="slide2"&gt;
                &lt;img src="images/people/miles.jpg" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="main_gallery_pic3"&gt;
            &lt;div class="slide2"&gt;
                &lt;img src="images/people/miles.jpg" /&gt;
            &lt;/div&gt;
            &lt;div class="slide2"&gt;
                &lt;img src="images/people/dal.jpg" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p></p>

<pre><code>$(document).ready(function(){
  var currentPosition2 = 0; 
  var slideWidth2 = 475;
  var slides2 = $('.slide2');
  var numberOfSlides2 = slides2.length;

  // Remove scrollbar in JS
  $('#main_gallery_pics2,#main_gallery_pics3').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides2
  .wrapAll('&lt;div id="slideInner2"&gt;&lt;/div&gt;')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth2
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner2').css('width', slideWidth2 * numberOfSlides2);



  // Insert left and right arrow controls in the DOM
  $('#main_content')
    .prepend('&lt;span class="control2" id="left_arrow2"&gt;Move left&lt;/span&gt;')
    .append('&lt;span class="control2" id="right_arrow2"&gt;Move right&lt;/span&gt;');

  // Hide left arrow control on first load
  manageControls2(currentPosition2);

  // Create event listeners for .controls clicks
  $('.control2')
    .bind('click', function(){
    // Determine new position

      currentPosition2 = ($(this).attr('id')=='right_arrow2')
    ? currentPosition2+1 : currentPosition2-1;

      // Hide / show controls
      manageControls2(currentPosition2);
      // Move slideInner using margin-left
      $('#slideInner2').animate({
        'marginLeft' : slideWidth2*(-currentPosition2)
      });
    });

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls2(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#left_arrow2').hide() }
    else{ $('#left_arrow2').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides2-1){ $('#right_arrow2').hide() }
    else{ $('#right_arrow2').show() }
    }

  });
</code></pre>
