18h Image Viewer

Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.
As of 2023-02-06. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name     18h Image Viewer
// @version  2
// @grant    none
// @match https://18h.mm-cg.com/en/*
// @match https://18h.mm-cg.com/zh/*
// @namespace http://xorcerer.github.io/
// @description Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(`
 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100vh;
  width: 100vw;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
}

/* The navigation links inside the overlay */
.overlay-content img {
  height: 100vh;
  width: 100vw;
	object-fit:contain;
}
`);

var origTitle = document.title;
var markup = document.documentElement.innerHTML;
var urlRe = /Large_cgurl\[\d+\] = "(.+)";/g;
var pics = [];
var cache = [];

function updateTitle(index, count) {
  var prefix = `${index + 1}/${count} `;
  document.title = prefix + origTitle;
}

function catchImage(i) {
  if (i >= pics.length)
    return;
  
	var i = new Image();
  var src = pics[i];
  i.src = src;
  cache.push(i);
}

for (const match of markup.matchAll(urlRe)) {
  var src = match[1];
  pics.push(src);
}


var d = document.createElement('div');
d.classList.add('overlay');

dc = document.createElement('div');
dc.classList.add('overlay-content');
d.appendChild(dc);

var i = document.createElement('img');
updateTitle(0, pics.length);
i.src = pics[0];
dc.appendChild(i);
catchImage(2);
catchImage(3);

document.body.innerHTML = '';
document.body.append(d);

var index = 0;
document.addEventListener('keyup', (e) => {
	var left = -1, right = 1;
		if (e.keyCode == 37) {
  			index -= 1;
				if (index == -1) index = pics.length - 1;
      	updateTitle(index, pics.length);
	      i.src = pics[index];
    } else if (e.keyCode == 39 || e.keyCode == 32) {
  			index += 1;
				if (index >= pics.length) index = 0;
      	updateTitle(index, pics.length);
	      i.src = pics[index];
      	catchImage(i + 1);
      	catchImage(i + 2);
    }
	return false;
});