JQuery, фокусируя элемент один раз, а затем scrollTo next & next & next

Question

Я показываю на странице много фотографий. Я хочу создать анимацию, которая находится в центре экрана, на изображении, которое пользователь просто click. И затем, после любого события click, я хочу отобразить следующее изображение, пока пользователь не покинет этот режим презентации. Примечание: я добавляю скрипт jquery scrollTo в свой код.

Вот что я сделал до сих пор: http://jsfiddle.net/qnQSP/3/

HTML

<div id="galleries"> 

    <div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 
    <div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div> 
    <div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 

</div> 

Jquery

 var next; 
     var element_already_focus = 0; 
     var oldcurrent = "";   

     $("#galleries #pictures-content").unbind("click"); 
     $("#galleries #pictures-content").bind("click", function(event) { 
      // Count the number of pictures 
      var max_number_of_pictures= $('#galleries #pictures-content').length; 
    //   console.log("max_number_of_pictures: "+max_number_of_pictures); 

      // Get the binding element class number 
       var picture_number = $(this).attr('class'); 
    //   console.log("picture_number: "+picture_number); 

      // Save the element inside the current variable 
       current=$(this); 


      // Do a loop to go to the top picture when 
      if(picture_number==max_number_of_pictures) 
      { 
       next = $("#galleries .1"); 
      } else 
      { 
       next = $(this).next(); 
      } 

      // Do a loop to go to the bottom picture  
      if(picture_number==1){ 
       previous = $("#galleries ."+max_number_of_pictures); 
      } else { previous = $(this).prev();} 


    //  console.log("current: "+$(this).attr("class")); 
      if(oldcurrent != "") 
      { 
       console.log("old: "+oldcurrent.attr("class")); 
// Doing some test 
       class_test = parseInt(oldcurrent.attr("class")); 
       class_test = parseInt(class_test)+parseInt(1); 
       console.log("old: "+class_test); 
      } 

      console.log("previous: "+previous.attr("class")); 
      console.log("current: "+current.attr("class")); 
      console.log("next: "+next.attr("class")); 

    if(oldcurrent == "") 
    { 
     $("body").scrollTo(current, 800); 
     next = 0; 
     console.log("What we do:"+next); 
    } 
    else{ 
    // If the element that we are binding have the same class as the old binding element (previous) 
    // We are redirecting the user to the next picture 
      console.log("oldcurrent "+oldcurrent.attr("class")); 
      console.log("current: "+current.attr("class")); 
      console.log("next: "+next.attr("class")); 

    // if((oldcurrent.attr("class"))==($(this).attr("class"))||(class_test)==(next.attr("class"))) { 
     if((oldcurrent.attr("class"))==(current.attr("class"))||(class_test)==(next.attr("class"))) { 
      $("body").scrollTo(next, 800);  
      next = 1; 
      console.log("What we do:"+next); 
     }else{ 
      $("body").scrollTo(current, 800); 
      next = 0; 
      console.log("What we do:"+next); 
     }  
    } 

     oldcurrent=current; 

     }); 

Моей проблема: я должен нажать два раза на картинке, чтобы перейти к следующий. Если я удалю условие, я не смогу сфокусировать другое изображение, когда выйду из режима презентации.

Я думаю, что мне нужно определить состояние, когда пользователь находится в режиме презентации (уже нажмите на картинку), и удалите это состояние, когда он останавливает режим презентации, удаляя.

Есть ли у кого-нибудь идеи или решения?

Answer 1

При щелчке просто проверьте, находится ли изображение в рендеринге. Если это так, вы можете предположить, что щелчок - это переход к следующему изображению.

Вы можете использовать $(yourImage).position().top, чтобы узнать, где будет изображение. и $(yourImage).height(), чтобы узнать его высоту.

var imageTop = $(yourImage).position().top, 
    imageHeight = $(yourImage).height(), 
    windowTop = $(yourImage).height(), 
    windowHeight = $(window).height(); 

if(imageTop>windowTop && top+height < windowTop+windowHeight){ 
    Scroll to the next one 
} 

Или, если вы хотите, чтобы изображение всегда придерживался верха:

if(imageTop==windowTop){ 
    Scroll to the next one 
} 

+1 для связывания скрипки