☰

Rule34.xxx - Image Hover

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

  1. // ==UserScript==
  2. // @name         Rule34.xxx - Image Hover
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.2
  5. // @description  Shows the full size image when you hover over a thumbnail. Also adds arrow key navigation.
  6. // @author       Gondola
  7. // @match        https://rule34.xxx/*
  8. // @require      http://code.jquery.com/jquery-3.4.1.min.js
  9. // @compatible   firefox
  10. // @compatible   chrome
  11. // ==/UserScript==
  12.  
  13.  
  14. (function() {
  15.  
  16.     /*---START Keyboard Navigation---*/
  17.     var pagination = document.getElementsByClassName("pagination")[0].children
  18.  
  19.     for(var i = 0; i < pagination.length; i++)
  20.     {
  21.         if(pagination[i].nodeName == "B")
  22.         {
  23.             pagination[i].classList.add("key_nav_pagination")
  24.         }
  25.     }
  26.  
  27.     window.addEventListener("keyup", checkKeyPress, false);
  28.  
  29.     function checkKeyPress(key)
  30.     {
  31.         if(document.activeElement.tagName != 'INPUT')
  32.         {
  33.  
  34.             if(key.keyCode == "39")
  35.             {
  36.                 document.getElementsByClassName("key_nav_pagination")[0].nextSibling.nextSibling.click()
  37.             }
  38.  
  39.             if(key.keyCode == "37")
  40.             {
  41.                 document.getElementsByClassName("key_nav_pagination")[0].previousSibling.previousSibling.click()
  42.             }
  43.         }
  44.     }
  45.     /*---END Keyboard Navigation---*/
  46.  
  47.  
  48.  
  49.     /*---START Image Hover---*/
  50.     document.getElementById("body").insertAdjacentHTML('afterbegin', "<img id='img_hover_container' style='float:left; position:absolute; max-width:200px; overflow:hidden; z-index:9999;' src=''>")
  51.  
  52.     var img_type = "jpg";
  53.     var mouse_offset_x = 16;
  54.     var mouse_offset_y = 16;
  55.     var mouse_side = false;
  56.     var currentMousePos = { x: -1, y: -1 };
  57.  
  58.     $(".preview").mouseenter(function()
  59.     {
  60.         img_type = "jpg"
  61.         $("#img_hover_container").attr("src",this.src.replace("thumbnails","/images").replace("thumbnail_",""))
  62.         $("#img_hover_container").css("max-height",$(window).height())
  63.  
  64.     })
  65.  
  66.     $(".preview").mouseleave(function()
  67.     {
  68.         $("#img_hover_container").attr("src","")
  69.     })
  70.  
  71.  
  72.     $(document).mousemove(function(event) {
  73.         currentMousePos.x = event.pageX;
  74.         currentMousePos.y = event.pageY;
  75.         update_pos();
  76.     });
  77.     
  78.     
  79.     //remove tag tooltip on hover
  80.     var thumb_list = document.getElementsByClassName("preview")
  81.  
  82.     for(var tl = 0; tl < thumb_list.length; tl++)
  83.     {
  84.         thumb_list[tl].title = "";
  85.     }
  86.  
  87.  
  88.     function update_pos(){
  89.         //Mouse Horizontal
  90.         if(currentMousePos.x > ($(window).width()/2))
  91.         {
  92.             mouse_side = true;
  93.             mouse_offset_x = -$("#img_hover_container").width() - 16;
  94.             $("#img_hover_container").css("max-width", currentMousePos.x - 16)
  95.         }
  96.         else
  97.         {
  98.             mouse_side = false;
  99.             mouse_offset_x = 16;
  100.             $("#img_hover_container").css("max-width", $(window).width()-currentMousePos.x)
  101.         }
  102.  
  103.         //Mouse Vertical
  104.         if(currentMousePos.y > ($(window).height() - $("#img_hover_container").height()))
  105.         {
  106.             mouse_offset_y = ($(window).height() - $("#img_hover_container").height()) + $(document).scrollTop();
  107.         }
  108.         else
  109.         {
  110.             mouse_offset_y = currentMousePos.y + 16;
  111.         }
  112.  
  113.         $("#img_hover_container").offset({
  114.             top: mouse_offset_y,
  115.             left: currentMousePos.x + mouse_offset_x
  116.         });
  117.     }
  118.  
  119.     //image type handler
  120.     $("#img_hover_container").on('error', function()
  121.     {
  122.         if(img_type == "jpg")
  123.         {
  124.             $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("jpg","png"))
  125.             img_type = "png";
  126.         }
  127.         else if(img_type == "png")
  128.         {
  129.             $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("png","jpeg"))
  130.             img_type = "jpeg";
  131.         }
  132.         else if(img_type == "jpeg")
  133.         {
  134.             $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace("jpeg","gif"))
  135.             img_type = "gif";
  136.         }
  137.     })
  138.  
  139.     //Update image position periodically
  140.     var intervalID = setInterval(function(){update_pos();}, 100);
  141.  
  142.     $("#img_hover_container").css("max-height", $(window).height())
  143.     /*---END Image Hover---*/
  144.  
  145. })();