☰

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-04-10. See the latest version.

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