Sleazy Fork is available in English.

Rule34.xxx - Image Hover

Shows the full size image when you hover over a thumbnail. Also adds arrow key navigation.

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==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---*/

})();