Перейти к следующему & предыдущему изображению (вертикальная прокрутка) с помощью jQuery

Question

У меня есть линейный список изображений (вертикальный), и я ищу использовать клавиатуру вверх & вниз, чтобы перейти к следующему или предыдущему изображению. Моя проблема в том, что я не знаю, где я на свитке, и где мне нужно прокрутить, чтобы перейти к следующему или предыдущему изображению.

Я видел this example, но он находится в горизонтальном положении. Я попытался сделать его вертикальным, но безуспешно ...

Я также пробовал некоторые вещи с помощью плагина inView jQuery и без успеха. Некоторые старт:

$("body:not(.photo) #images img").each(function() { 
    $(this) 
     .css({cursor: "pointer"}) 
     .on("click", function() { 
      var $n = $(this).next(), 
       offset = ($n.length) ? $n.offset().top : 0; 

      scrollTo(offset); 
     }); 
    }); 

    // http://jsfiddle.net/JjhUN/5/ 
    var elems = []; 
    $("#images").children().each(function() { 
    elems.push(this.offsetTop); 
    }); 

    console.log(elems); 

Answer 1

Я играл с этой горизонтальной например, и изменить его в вертикальное положение. http://jsfiddle.net/6gCA6/1/

Надеюсь, это было полезно.

JS

$(function() { 
    var boxLefts = []; 
    $('.box').each(function(i, el){ 
     boxLefts.push(this.offsetTop); 
    }); 

    $(document).keydown(function(e) { 
     var dir = false, 
      targetUp = -1; 

     switch (e.keyCode) { 
     case 38: 
      dir = -1; 
      break;     
     case 40: 
      dir = 1; 
      break; 
     default: 
      break; 
     } 

     if (dir) { 
      e.preventDefault(); 
      winUp = window.scrollY; 
      $.each(boxLefts, function(i, v){ 
       if ((dir == 1 && winUp < v && targetUp < 0) || 
        (dir == -1 && winUp > v)) { 
        targetUp = v; 
       } 
      }); 
      if (targetUp >= 0) { 
       $('html, body').animate({scrollTop: targetUp}, 1000); 
      } 
     } 
    }); 
}); 

CSS

#wrapper { 
    white-space: nowrap; 
    width: 1500px; 
} 

.box { 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    margin: 0 10px 0 0; 
    /*display: inline-block;*/ 
}