WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. jaredsmyth
    Member
    Posted 1 year ago #

    Hello,
    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 )
        			{
            			$(\'.slideshow-next\').click();
    			}
        		if ( e.which === 37 )
        			{
            			$(\'.slideshow-prev\').click();
    			}
    	});
    </script> ';

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

    ----

    http://wordpress.org/extend/plugins/portfolio-slideshow/

  2. schwarzgrau
    Member
    Posted 1 year 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.
    Keyboard-Navigation-Test

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

  3. jaredsmyth
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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