Portfolio Slideshow
TUTORIAL | Add Arrow-Key Navigation (4 posts)

  1. jaredsmyth
    Posted 3 years ago #

    I just wanted to post a quick 'tutorial' for anyone who is interested in adding arrow-key navigation to this plugin. The Pro version from RayGun already has that functionality, but the free version was lacking it. I checked with Dalton at RayGun and he gave me the OK to post this as a tutorial but said that RayGun has no plans of adding it standard to the free version.

    So, if you're interested in hacking this plugin to include arrow-key navigation the instructions follow.

    *do not attempt this if you think you 'might break it.' this is not a hard modification to do by any means, but i take no responsibility if you 'break your site.'


    To enable Arrow-Key navigation in Portfolio Slideshow:

    1) Navigate to: Plugins -> Editor -> Portfolio Slideshow

    2) Open portfolio-slideshow/inc/shortcode.php

    3) Scroll to the bottom of the document, and just above the line that reads
    return $slideshow;
    add this code:

    echo ' <script type=\'text/javascript\'>
    	$(window).keydown (function (e) {
        		if ( e.which === 39 )
        		if ( e.which === 37 )
    </script> ';

    4) Enjoy flipping through the images in your galleries with the arrow keys on your keyboard.



  2. schwarzgrau
    Posted 2 years ago #

    This is exactly what I need. I modified the slideshow to use it as "video-player" which are able to show individual frames. Adding the keyboard-navigation would be great. But it doesn't seem to work, although the java-script is written on the page.

    Maybe you could tell me what I'm doing wrong.

  3. jaredsmyth
    Posted 2 years ago #

    hi @schwarzgrau - i think your problem is coming in with a 404 error on http://headless.schwarzgrau.com/wp-content/plugins/nextgen-gallery/css/headless.css?ver=1.0.0 - open up developer tools in chrome or firebug in ff and you will see the issue.

  4. schwarzgrau
    Posted 2 years ago #

    Thank you for your reply. I uploaded the missing css file and installed firebug, but I can't find the error. Maybe cause I'm not familiar with firebug or javascript.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic