☰

18h.mm-cg.com Image Viewer

Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.

Fra 18.11.2022. Se den seneste versjonen.

// ==UserScript==
// @namespace http://xorcerer.github.io/
// @name     18h.mm-cg.com Image Viewer
// @version  1
// @grant    none
// @description Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.
// @match https://18h.mm-cg.com/*/content.html
// @license MIT
// ==/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 markup = document.documentElement.innerHTML;
var urlRe = /Large_cgurl\[\d+\] = "(.+)";/g;
var pics = [];
var cache = [];

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


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');
i.src = pics[0];
dc.appendChild(i);

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;
	      i.src = pics[index]; return false;
    } else if (e.keyCode == 39 || e.keyCode == 32) {
  			index += 1;
				if (index >= pics.length) index = 0;
	      i.src = pics[index]; return false;
    }
});