Shows the full size image when you hover over a thumbnail. Also adds arrow key navigation.
// ==UserScript==
// @name Rule34.xxx - Image Hover
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @description Shows the full size image when you hover over a thumbnail. Also adds arrow key navigation.
// @author Gondola
// @match https://rule34.xxx/*
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @compatible firefox
// @compatible chrome
// ==/UserScript==
(function() {
/*---START Keyboard Navigation---*/
var pagination = document.getElementsByClassName("pagination")[0].children
for(var i = 0; i < pagination.length; i++)
{
if(pagination[i].nodeName == "B")
{
pagination[i].classList.add("key_nav_pagination")
}
}
window.addEventListener("keyup", checkKeyPress, false);
function checkKeyPress(key)
{
if(document.activeElement.tagName != 'INPUT')
{
if(key.keyCode == "39")
{
document.getElementsByClassName("key_nav_pagination")[0].nextSibling.nextSibling.click()
}
if(key.keyCode == "37")
{
document.getElementsByClassName("key_nav_pagination")[0].previousSibling.previousSibling.click()
}
}
}
/*---END Keyboard Navigation---*/
/*---START Image Hover---*/
document.getElementById("body").insertAdjacentHTML('afterbegin', "<img id='img_hover_container' style='float:left; position:absolute; max-width:200px; overflow:hidden; z-index:9999;' src=''>")
var img_type = "jpg";
var mouse_offset_x = 16;
var mouse_offset_y = 16;
var mouse_side = false;
var currentMousePos = { x: -1, y: -1 };
$(".preview").mouseenter(function()
{
img_type = "jpg"
$("#img_hover_container").attr("src",this.src.replace("thumbnails","/images").replace("thumbnail_",""))
$("#img_hover_container").css("max-height",$(window).height())
})
$(".preview").mouseleave(function()
{
$("#img_hover_container").attr("src","")
})
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
update_pos();
});
//remove tag tooltip on hover
var thumb_list = document.getElementsByClassName("preview")
for(var tl = 0; tl < thumb_list.length; tl++)
{
thumb_list[tl].title = "";
}
function update_pos(){
//Mouse Horizontal
if(currentMousePos.x > ($(window).width()/2))
{
mouse_side = true;
mouse_offset_x = -$("#img_hover_container").width() - 16;
$("#img_hover_container").css("max-width", currentMousePos.x - 16)
}
else
{
mouse_side = false;
mouse_offset_x = 16;
$("#img_hover_container").css("max-width", $(window).width()-currentMousePos.x)
}
//Mouse Vertical
if(currentMousePos.y > ($(window).height() - $("#img_hover_container").height()))
{
mouse_offset_y = ($(window).height() - $("#img_hover_container").height()) + $(document).scrollTop();
}
else
{
mouse_offset_y = currentMousePos.y + 16;
}
$("#img_hover_container").offset({
top: mouse_offset_y,
left: currentMousePos.x + mouse_offset_x
});
}
//image type handler
$("#img_hover_container").on('error', function()
{
if(img_type == "jpg")
{
$("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("jpg","png"))
img_type = "png";
}
else if(img_type == "png")
{
$("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("png","jpeg"))
img_type = "jpeg";
}
else if(img_type == "jpeg")
{
$("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("jpeg","gif"))
img_type = "gif";
}
})
//Update image position periodically
var intervalID = setInterval(function(){update_pos();}, 100);
$("#img_hover_container").css("max-height", $(window).height())
/*---END Image Hover---*/
})();