Adding keyboard support to single image pages

I love the single image page view since it supports customizations using phplugins. Unfortunately, navigation requires a mouse or a touchpad. But there is a fix for that! With some php and javascript magic, support for simple keyboard navigation can be added:

  • Left key: previous image
  • Right key: next image
  • Escape key: go back to album view

You can see this in operation on this gallery.

Adding following code to your phplugins file is all that is needed:

function single_bottom(){
   // support for left/right arrow key and esc key navigation
   $photo = $this->photo;
   $album = $this->album;
   echo' <script>
      function checkKey(e) {
         switch(e.which) {
            case 37: ';
               if ($album->getPreviousPhoto($photo)) { 
                  echo 'location.href=$("li.single_image_prev a").attr("href");';
               echo 'break;
            case 39:';
               if ($album->getNextPhoto($photo)) {
                  echo 'location.href=$("li.single_image_next a").attr("href");';
               echo 'break;
            case 27:';
               echo 'location.href=$("li.single_image_back a").attr("href");';			
               echo 'break;
            default: return; 
      document.onkeydown = checkKey;

Now you can use the keyboard to control single page image view as well. Happy browsing!

Did you like this post? Did you use the given code? Please consider supporting me by buying me a coffee!

Buy Me A Coffee


Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Consulting

Do you need help designing your web site or getting Backlight working the way you want? Contact me to discuss your idea or project.

Buy me a Coffee

If you like what I share here, please consider buying me a coffee or a print. This helps keeping me motivated to continue posting. Thank you!

Buy Me A Coffee