1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// ==UserScript==
// @name plurk Imagehover
// @namespace http://tampermonkey.net/
// @version 0.1
// @description YES!
// @author NOKO
// @match https://www.plurk.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
var style = document.createElement('style');
style.innerHTML = `
@keyframes nodeInserted{from{outline-color: #fff;}to{outline-color: #000;}}
a.pictureservices > img{animation-name: nodeInserted;}
`;
document.head.append(style);

var ImageHoverOver = function(e){
if(e.target.dataset.hovered){return;}
e.target.dataset.hovered = true;
var img = document.createElement('img');
img.dataset.big = true;
img.src = e.target.parentNode.href;
img.style.position = 'fixed';
document.body.append(img);
};
var ImageHoverMove = function(e){
var padding = 25;
var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var height = Math.min(img.naturalHeight, windowHeight);
var width = img.naturalWidth * (height / img.naturalHeight);
var top = Math.max(0,Math.min(window.innerHeight-height,(e.clientY -height/2)));
var left = (e.clientX - width - padding)>=0 ? (e.clientX - width - padding) : (e.clientX + padding);
img.style.height = height + 'px';
img.style.width = width + 'px';
img.style.top = top + 'px';
img.style.left = left + 'px';
img.style.display='';
};
var ImageHoverOut = function(e){
var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]');
img.style.display='none';
};
var inject = function(e){
if (e.animationName == 'nodeInserted')
{
e.target.addEventListener("mouseover", ImageHoverOver);
e.target.addEventListener("mousemove", ImageHoverMove);
e.target.addEventListener("mouseout", ImageHoverOut);
}
};
document.addEventListener('animationstart', inject, false);
})();