проблема со слайд-шоу jquery

Question

У меня есть страница галереи с различными слайд-шоу, каждое слайд-шоу связано с другой датой, и когда я нажимаю на определенную дату, появляется соответствующее слайд-шоу, проблема в том, что после просмотра первого слайд-шоу и щелчка по второй Слайд-шоу, слайд-шоу не начинается с первого слайда, оно показывает с предыдущего номера слайда, мне было интересно, если кто-нибудь может помочь мне решить эту проблему. Спасибо

Обновление: после установки currentPosition = 0; Мне нужно нажать на стрелку вправо, чтобы привести слайд к первому, (это потому, что .bind ('click', function)), который связан со стрелкой, поэтому мне было интересно, как я могу вывести его на первый слайд просто нажав на соответствующую галерею, ссылка на сайт текст ссылки

 <div id="gallery_page">
    <div class="slide">
      <span id="first"><p>King Baby Lunch Party</p></span>
      <span id="second"><p>Feb 2008</p></span>
    </div>
 </div>



<div id="main_gallery_pics_first">
     <div class="slide2">
        <img src="" />
     </div>
     <div class="slide2">
        <img src="" />
     </div>
     <div class="slide2">
        <img src="" />
     </div>
 </div>

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


$(document).ready(function(){

  var currentPosition = 0; 
  var slideWidth2 = 475;
  var slideWidth3 = 475;
  var slides2 = $('.slide2');
  var slides3 = $('.slide3');
  var numberOfSlides2 = slides2.length;
  var numberOfSlides3 = slides3.length;

  function hide() {
    $('#main_gallery_pics_first,#main_gallery_pics_second').hide();
  }
  //hide everything
  hide();

  //show first gallery on page load
  $('#main_gallery_pics_first').show();

  //show appropriate gallery when one is clicked
  var id;
  $('.slide span').click(function() {
    id = $(this).attr('id');
    hide();
    $('#main_gallery_pics_'+id).show();
  });


  // Remove scrollbar in JS
 // $('#main_gallery_pics_first,#main_gallery_pics_second').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);

   // Wrap all .slides with #slideInner div
  slides3
  .wrapAll('<div id="slideInner3"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth3
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner3').css('width', slideWidth3 * numberOfSlides3);


  // 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
  manageControls(currentPosition);

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

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


      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left

      $('#slideInner2').animate({
        'marginLeft' : slideWidth2*(-currentPosition)
      });


      $('#slideInner3').animate({
        'marginLeft' : slideWidth3*(-currentPosition)
      });

    });


  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(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

Просто установите currentPosition на 0 при открытии новой галереи

$('.slide span').click(function() {
    //not needed actually
    //id = $(this).attr('id');

    //reset position and margins
    currentPosition = 0;
    $('#slideInner2').css('marginLeft' , 0);
    $('#slideInner3').css('marginLeft' , 0);

    hide();
    $('#main_gallery_pics_'+this.id).show();
});

Answer 2

Сброс переменной текущего положения при запуске нового слайд-шоу.