problem with jquery slide show

Question

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, link text(this is for testing purposes),

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,

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).

thanks

<div id="main_content">

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

        <div id="main_gallery_pic3">
            <div class="slide2">
                <img src="images/people/miles.jpg" />
            </div>
            <div class="slide2">
                <img src="images/people/dal.jpg" />
            </div>
        </div>
  </div>

$(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('<div id="slideInner2"></div>')
  // 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('<span class="control2" id="left_arrow2">Move left</span>')
    .append('<span class="control2" id="right_arrow2">Move right</span>');

  // 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() }
    }

  });

Answer 1

You have a typo in gallery_pic_replace.js. When you click Feb, you're going after:

$('#main_gallery_pics3')

but in your markup it's

<div id="main_gallery_pic3">

Sneaky 's'....

EDIT: The next issue is with:

slides2
  .wrapAll('<div id="slideInner2"></div>')

You're taking all the slides and wrapping them in one div. This is causing them to become repositioned into the January div.