Как я могу использовать клавиатуру для прокрутки фотографий

Question

У меня есть небольшой сайт с портфолио фотографий, которым я делюсь, чтобы поделиться фотографиями со своими родственниками. Фотографии располагаются каждые 1000 пикселей или около того на странице с вертикальной прокруткой. Пример здесь: http://pavelrozman.com/photo/events/jamison/. Прямо сейчас у меня есть небольшой Javascript, который позволяет прокручивать 800 пикселей с помощью клавиш со стрелками. Это нормально, но противоречиво из-за разной высоты изображения. Я прочитал статью о The Verge, и в ней есть именно то, что я ищу, но я понятия не имею, как ее реализовать, потому что я ничего не знаю о Javascript/jQuery. Статья здесь http://www.theverge.com/2013/7/29/4560214/point-and-shoot-perfection-an-evening-with-sonys-rx100m2 и я хотел бы скопировать "Использовать" Функция "d" и "s" для прокрутки ", когда она прокручивается до верхней части следующего или предыдущего изображения, но, если возможно, используйте клавиши со стрелками вместо" s "и" d ". Заранее спасибо.

Answer 1

От макушки головы составьте список top смещения каждого изображения, а затем при нажатии стрелок вниз / вверх сравните scrollTop положение к позициям изображения, чтобы определить, какое из них ближе всего в направлении вверх / вниз.

var locs = [];

// Save offsets of each image
// Use a better selector in real life
$('img').each(function () {
    locs.push($(this).offset().top);
});

$(document).keydown(function (e) {

    switch (e.which) {
        case 37:
        case 38:
        case 83:
            // Get the current scroll position 
            var sTop = parseInt($(document).scrollTop());

            // For UP, go through the list backward until
            // you find one before the current scroll position
            for (i = locs.length-1; i >= 0; i--) {
                if (locs[i] < sTop) {
                    $(document).scrollTop(locs[i]);
                    break;
                }
            }
            break;
        case 39:
        case 40:
        case 68:
            // Get the current scroll position 
            var sTop = parseInt($(document).scrollTop());

            // For DOWN, go through the list until
            // you find one after the current scroll position
            for (i = 0; i < locs.length; i++) {
                if (locs[i] > sTop + 1) {
                    $(document).scrollTop(locs[i]);
                    break;
                }
            }
            break;
        default:
            return true;
    }

    return false;
});

Демо: http://jsfiddle.net/9BEbh/