Using arrow keys to move the page up or down by 500px at a time

I have a client with a very specific requirement.

They do not want to use a gallery or lightbox, so no solutions that involve either will help.

Basically they are inserting a number of full size images on a post which will follow each other in a single column and they want to be able to press the up and down keys on the keyboard to make the next image come into view and center on the screen or skip 500px which will work as well.

They have seen it on another site, but this was not wordpress and is fixed at a vertical size and scrolled horizontally.
The site my client wants will vary in height depending on the number of images inserted on the page.

I have found various jquery snippets which may help but I'm having trouble getting them to work in wordpress. This http://jsfiddle.net/aVvQF/4/ gives the approximate function required.

Can anyone help me get this working? My client isn't tech savvy at all, so the least amount of work they have to do when they insert their images the better.

If there is a better way to do this I'm open to that too, so long as it doesn't involve a gallery or lightbox as they absolutely do not want either.

Thank you.

  • Vaughan

    Hi Vic,

    I'm not proficient in jquery at all.

    This might not work, but if you add the following to your theme footer.php

    <script type="text/javascript">
    $(window).keydown(function(e) {
        e.preventDefault(); //prevent default arrow key behavior
    
        var targetElement;
        //down
        if (e.keyCode == 40) {
            $targetElement = $('.active').next('img');
        }
        //up
        else if (e.keyCode == 38) {
            $targetElement = $('.active').prev('img');
        }
        if (!$targetElement.length) {return;}
        $('.active').removeClass('active');
        $targetElement.addClass('active');
    
        //scroll element into view
        $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
    });
    </script>

    then make sure the first image on the page has a class of active

    <img class="active" src="http://placehold.it/100x100/aaafff" />

    But let me just ask one of our developers for some assistance with this for you as he's a lot better with jQuery than I am.

    Hope this helps

  • Jose

    Well, it is not a simple requirement I must say. Specially when the client has this restrictions about galleries.

    Coding this from scratch would take a bunch of work, specially considering that this should behave the same across different browsers.

    My suggestion would be to use some jQuery plugin like this one:
    http://alvarotrigo.com/fullPage/#firstPage

    You still need to do a good amount of work on your theme to implement it.

    If you are not comfortable with coding, you can maybe take a look at our jobs board.

    Hope this helps to point you in the right direction :slight_smile:

    Cheers,
    Jose

  • Vic

    Thanks Jose, I appreciate your input.

    I did look at some plugins like that but the client will be adding images to a post so I won't be able to use anchor points and also wants the top of the next picture to be shown so people know to keep scrolling. The trouble is as they have seen it done on another site which looks very basic they think this function is simple to do, and it's turned from a 'nice to have' feature into a 'must have'.

    I've been trying to find a solution for ages and it's really eating into my time. I suspected it wouldn't be an easy fix.

    Thanks again though.

  • Jose

    Vic,
    Unfortunately, I can't invest the time needed to sort this for you since it is a bit beyond our scope.
    I would love to see it working though.

    I woould recommend you to first try to implement this code in a hardcoded html. Once you get it working, you can modify your WP template to match the same markup as your hardcoded file.

    First step would be to confirm if the key events are being triggered properly by adding a console.log(); call.

    Then, I would take care of the animation. Always using the developer tool console in your browser to debug the javascript code.

    When implementing code snippets grabed from other sites, the most common error is the jQuery selector not matching your markup. Make sure to test the selector in the console to see if the returned element is correct.

    Please keep me posted on the progress. :slight_smile:

    Cheers,
    Jose

  • Vic

    Many thanks for your help Jose and for pointing me in the right direction,

    I managed to get it sort of working, but only in html not in wordpress.

    Turns out the js for it is hardcoded into the cms that site is hosted on so I can't do much with that.

    The client has also decided to go elsewhere as he couldn't see why it was an issue so I won't be wasting any more of my time on it right now, maybe when I have some spare time I can go back and look at it again for future reference.

    Thank you once again, and apologies for the delay in my reply.

    Kind regards

    Vic

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.