Enhanced Twenty Fourteen Image Navigation

In my JS Unit Testing presentation today for WPSessions (slides for the talk are available here), I showed a WordPress plugin I’ve written which is designed to improve the keyboard image navigation experience within the Twenty Fourteen theme. In that theme it’s possible to use the left and right arrow keys while browsing images to navigate to the previous or next image, but doing so triggers a full page refresh each time.

Since I needed to write some code anyway in order to demonstrate the use of QUnit with a WordPress plugin, I went ahead and wrote a small plugin that will replace the default Twenty Fourteen image navigation script with one that fetches the requested image via jQuery’s .load method, injecting it directly into the page. If you’re using Twenty Fourteen on your own sites, check out the plugin on Github— and if not, feel free to check it out anyway just for the QUnit examples!

As always, if you notice any issues with the code (or have questions about how or why I’m doing things a certain way), feel free to leave a comment or issue on the repository and I’ll answer as soon as possible.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.