☰

Instagram: Arrow Keys for Multi-Image Posts

Makes right/left keys navigate next/previous images in multi-image posts, as well as to adjacent posts. Holding shift, right/left jumps directly between posts. Esc key closes posts.

  1. // ==UserScript==
  2. // @name         Instagram: Arrow Keys for Multi-Image Posts
  3. // @description  Makes right/left keys navigate next/previous images in multi-image posts, as well as to adjacent posts. Holding shift, right/left jumps directly between posts. Esc key closes posts.
  4. // @match        https://www.instagram.com/*
  5. // @version      0.6
  6. // @author       mica
  7. // @namespace    greasyfork.org/users/12559
  8. // @license      MIT
  9. // ==/UserScript==
  10.  
  11.  
  12. const nextImg = () => document.querySelector('article button[aria-label="Next"]');
  13. const prevImg = () => document.querySelector('article button[aria-label="Go back"]');
  14. const nextPgImg = () => document.querySelector('div[role="button"] button[aria-label="Next"]');
  15. const prevPgImg = () => document.querySelector('div[role="button"] button[aria-label="Go back"]');
  16. const nextPost = () => document.querySelector('svg[aria-label="Next"]');
  17. const prevPost = () => document.querySelector('svg[aria-label="Go back"]');
  18. const closePost = () => document.querySelector('svg[aria-label="Close"]');
  19. const openFirst = () => document.querySelector('[role="tablist"]');
  20.  
  21. document.addEventListener('keydown', event => {
  22.     if (!location.pathname.match(/^\/$|^\/reels\/|^\/direct\/|^\/accounts\/|^\/your_activity\/|^\/.*\/saved\//g)) {
  23.         event.stopPropagation();
  24.         switch (true) {
  25.             case (event.shiftKey && event.key == 'ArrowRight'):
  26.                 nextPost().parentElement.click();
  27.                 break;
  28.             case (event.key == 'ArrowRight'):
  29.                 if (nextImg()) {
  30.                     nextImg().click();
  31.                 } else if (nextPost()) {
  32.                     nextPost().parentElement.click();
  33.                 } else if (openFirst()) {
  34.                     openFirst().nextSibling.querySelector('a').click();
  35.                 } else {
  36.                     nextPgImg().click();
  37.                 }
  38.                 break;
  39.             case (event.shiftKey && event.key == 'ArrowLeft'):
  40.                 prevPost().parentElement.click();
  41.                 break;
  42.             case (event.key == 'ArrowLeft'):
  43.                 if (prevImg()) {
  44.                     prevImg().click();
  45.                 } else if (prevPost()) {
  46.                     prevPost().parentElement.click();
  47.                 } else {
  48.                     prevPgImg().click();
  49.                 }
  50.                 break;
  51.             case (event.key == 'Escape'):
  52.                 closePost().parentElement.click();
  53.                 break;
  54.         }
  55.     }
  56. });