Title: [Plugin: Portfolio Slideshow] TUTORIAL | Add Arrow-Key Navigation
Last modified: August 20, 2016

---

# [Plugin: Portfolio Slideshow] TUTORIAL | Add Arrow-Key Navigation

 *  Resolved [jaredsmyth](https://wordpress.org/support/users/jaredsmyth/)
 * (@jaredsmyth)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/plugin-portfolio-slideshow-tutorial-add-arrow-key-navigation/)
 * 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/](http://wordpress.org/extend/plugins/portfolio-slideshow/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [schwarzgrau](https://wordpress.org/support/users/schwarzgrau/)
 * (@schwarzgrau)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/plugin-portfolio-slideshow-tutorial-add-arrow-key-navigation/#post-2920191)
 * 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](http://headless.schwarzgrau.com/falling-man-01/)
 * Maybe you could tell me what I’m doing wrong.
 *  Thread Starter [jaredsmyth](https://wordpress.org/support/users/jaredsmyth/)
 * (@jaredsmyth)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-portfolio-slideshow-tutorial-add-arrow-key-navigation/#post-2920221)
 * hi [@schwarzgrau](https://wordpress.org/support/users/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](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.
 *  [schwarzgrau](https://wordpress.org/support/users/schwarzgrau/)
 * (@schwarzgrau)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-portfolio-slideshow-tutorial-add-arrow-key-navigation/#post-2920222)
 * 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.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘[Plugin: Portfolio Slideshow] TUTORIAL | Add Arrow-Key Navigation’ is
closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/portfolio-slideshow_ffffff.svg)
 * [Portfolio Slideshow](https://wordpress.org/plugins/portfolio-slideshow/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/portfolio-slideshow/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/portfolio-slideshow/)
 * [Active Topics](https://wordpress.org/support/plugin/portfolio-slideshow/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/portfolio-slideshow/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/portfolio-slideshow/reviews/)

## Tags

 * [arrow](https://wordpress.org/support/topic-tag/arrow/)
 * [arrow keys](https://wordpress.org/support/topic-tag/arrow-keys/)
 * [arrows](https://wordpress.org/support/topic-tag/arrows/)
 * [flipping](https://wordpress.org/support/topic-tag/flipping/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)
 * [next](https://wordpress.org/support/topic-tag/next/)
 * [prev](https://wordpress.org/support/topic-tag/prev/)
 * [previous](https://wordpress.org/support/topic-tag/previous/)
 * [scrolling](https://wordpress.org/support/topic-tag/scrolling/)

 * 3 replies
 * 2 participants
 * Last reply from: [schwarzgrau](https://wordpress.org/support/users/schwarzgrau/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-portfolio-slideshow-tutorial-add-arrow-key-navigation/#post-2920222)
 * Status: resolved