problème avec le diaporama jquery

Question

J'ai une page galerie avec différents diaporamas, chaque diaporama est connecté à une date différente, et quand je clique sur une date particulière le diaporama correspondant apparaîtra, le problème est qu'après avoir vu la première diapositive montrer et en cliquant sur le deuxième diaporama, le diaporama ne commence pas à partir de la première diapositive, il montre à partir de la diapositive précédente, je me demandais si quelqu'un pourrait m'aider à résoudre ce problème.thanks

Mise à jour: Après le réglage de la currentPosition = 0; Je dois cliquer sur la flèche droite pour amener la diapositive à la première (c'est parce que le .bind ('clic', fonction) est connecté à la flèche, donc je me demandais comment je peux l'amener à la première diapositive en cliquant sur la galerie appropriée, le lien vers le site est link text

<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

Il suffit de définir currentPosition-0 lorsque vous ouvrez une nouvelle galerie

$('.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

Réinitialiser la variable currentPosition lorsque vous démarrez le nouveau diaporama.