Keyboard Image Navigation

3/16/2025
As of 16. 03. 2025. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        Keyboard Image Navigation
// @namespace   Violentmonkey Scripts
// @match       https://divisare.com/projects/*
// @grant       none
// @version     1.0
// @author      tjia.work
// @description 3/16/2025
// @license     MIT
// ==/UserScript==

(function() {
  'use strict';

  // Select all images in #gallery
  const images = Array.from(document.querySelectorAll("#gallery .image"));
  if (images.length === 0) return; // Exit if no images found

  const options = {
    behavior: "instant", // smooth | instant | auto
    block: "start", // start | center | end | nearest
    inline: "start", // start | center | end | nearest
  };

  let index = 0; // Track current image index

  // Set up Intersection Observer
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        index = images.indexOf(entry.target);
      }
    });
  }, { threshold: 0.5 });

  images.forEach(img => observer.observe(img));

  // Keyboard navigation
  document.addEventListener("keydown", (e) => {
    switch (e.key.toLowerCase()){
      case "arrowright":
      case "d":
      case "j":
        index = Math.min(index + 1, images.length - 1);
        break;
      case "arrowleft":
      case "a":
      case "k":
        index = Math.max(index - 1, 0);
        break;
      default:
        return;
        break;
    }
    images[index].scrollIntoView(options);

  });

})();