☰

Image viewer

Use grid wallpaper to highlight transparent image. Support to see the large image by holding the right mouse and drag.

As of 2016-07-09. See the latest version.

  1. // ==UserScript==
  2. // @name         Image viewer
  3. // @namespace    http://devs.forumvi.com/
  4. // @description  Use grid wallpaper to highlight transparent image. Support to see the large image by holding the right mouse and drag.
  5. // @version      1.0.5
  6. // @icon         http://i.imgur.com/ItcjCPc.png
  7. // @author       Zzbaivong
  8. // @license      MIT
  9. // @match        http://*/*
  10. // @match        https://*/*
  11. // @noframes
  12. // @supportURL   https://github.com/baivong/Userscript/issues
  13. // @run-at       document-idle
  14. // @grant        GM_addStyle
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.  
  19.     'use strict';
  20.  
  21.     var theme = 'light', // dark|light
  22.  
  23.         url,
  24.         doc = document;
  25.  
  26.     if (theme === 'light') {
  27.         url = 'data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==';
  28.     } else {
  29.         url = 'data:image/gif;base64,R0lGODlhCgAKAPAAACIiIgAAACH5BAHoAwEALAAAAAAKAAoAAAIRjA2Zhwoc3GMSykqd1VltzxQAOw==';
  30.     }
  31.  
  32.     function scrollByDragging(container, disableH, disableV) {
  33.  
  34.         function mouseUp(e) {
  35.             if (e.which !== 3) return;
  36.  
  37.             window.removeEventListener('mousemove', mouseMove, true);
  38.             container.style.cursor = 'default';
  39.         }
  40.  
  41.         function mouseDown(e) {
  42.             if (e.which !== 3) return;
  43.  
  44.             pos = {
  45.                 x: e.clientX,
  46.                 y: e.clientY
  47.             };
  48.  
  49.             window.addEventListener('mousemove', mouseMove, true);
  50.             container.style.cursor = 'move';
  51.         }
  52.  
  53.         function mouseMove(e) {
  54.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  55.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  56.         }
  57.  
  58.         var pos = {
  59.             x: 0,
  60.             y: 0
  61.         };
  62.  
  63.         container.oncontextmenu = function (e) {
  64.             e.preventDefault();
  65.         };
  66.  
  67.         container.addEventListener('mousedown', mouseDown, false);
  68.         window.addEventListener('mouseup', mouseUp, false);
  69.  
  70.     }
  71.  
  72.     if (document.contentType.indexOf('image/') === 0) {
  73.  
  74.         GM_addStyle('body{background:url(' + url + ') repeat scroll rgba(0, 0, 0, 0.3);} body > img {background-color: transparent !important; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;} body > img:hover {background: rgba(0, 0, 0, 0.4) !important; outline: 3px solid #333;} body > img[style*="cursor: zoom-out;"], body > img.overflowing {position: relative!important;}');
  75.  
  76.         scrollByDragging(doc.body);
  77.         scrollByDragging(doc.documentElement);
  78.  
  79.     }
  80.  
  81. }());