☰

Image Viewer

inject this script into any page, and RIGHT-CLICK on the image you want to view full-size

目前為 2014-05-04 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name       Image Viewer
  3. // @namespace  https://gist.github.com/bradenbest/04bd0fc2d57ec650449f
  4. // @version    1.3.0
  5. // @description  inject this script into any page, and RIGHT-CLICK on the image you want to view full-size
  6. // @copyright  2014 - present, Braden Best
  7. // ==/UserScript==
  8.  
  9. /*
  10.  * Web image viewer script by Braden Best
  11.  * To use: 
  12.  *   inject this script into any page, and RIGHT-CLICK on the image you want to view full-size
  13.  *     while the image is "open", you can drag it around to pan instead of scrolling
  14.  *     There is a close button, and a full URL link above the image
  15.  *     You can press Esc to close the image without the need for clicking the close button
  16.  *     You can press Ctrl to re-initialize the script, for when images don't respond to right-clicking
  17.  * Special thanks to Cyberdevil for providing suggestions
  18.  *   Escape key
  19.  *   Provide Direct URL to image
  20.  *   image is draggable
  21.  *   Don't let it interfere with default click events
  22.  */
  23.  
  24. (function initialize(init){
  25.   var init = init || 0;
  26.   function push(url){
  27.     var img = document.createElement('img'),
  28.         img_helper = document.createElement('div');
  29.     // Image
  30.     img.src = url;
  31.     img.style.position = 'absolute';
  32.     img.style.left = '0px';
  33.     img.style.top  = '60px';
  34.     img.style.zIndex = '2147483647'; // this is to push it above everything else, so the NG navbar doesn't float over it.
  35.     img.className = 'img_viewer';
  36.     img.draggable = 'false';
  37.     img.dragging = 0;
  38.     img.mousepos = [0,0];
  39.     // Image helper
  40.     img_helper.innerHTML = "Click here to close image<hr><a target=\"_blank\" href=\"" + url + "\">Direct URL</a>";
  41.     img_helper.style.position = 'absolute';
  42.     img_helper.style.left = '0px';
  43.     img_helper.style.top  = '0px';
  44.     img_helper.style.margin = '0';
  45.     img_helper.style.padding = '5px 0';
  46.     img_helper.style.width = '100%';
  47.     img_helper.style.height='50px';
  48.     img_helper.style.background = '#fff';
  49.     img_helper.style.color = '#000';
  50.     img_helper.style.fontSize = '12px';
  51.     img_helper.style.textAlign = 'center';
  52.     img_helper.style.zIndex = '2147483647'; // The absolute maximum
  53.     img_helper.className = 'img_viewer';
  54.     // append to body
  55.     document.body.appendChild(img);
  56.     document.body.appendChild(img_helper);
  57.     document.body.scrollTop = 0;
  58.     // helper on-click
  59.     img_helper.onclick = function(){
  60.       document.body.removeChild(img);
  61.       document.body.removeChild(img_helper);
  62.       img_helper.onclick = null;
  63.     }
  64.     img.onmousedown = function(evt){
  65.       this.dragging = 1;
  66.       this.mousepos[0] = (evt.clientX || evt.pageX);
  67.       this.mousepos[1] = (evt.clientY || evt.pageY);
  68.     }
  69.     img.onmouseup = function(evt){
  70.       this.dragging = 0;
  71.     }
  72.     img.onmousemove = function(evt){ // Hoo boy, that was pretty difficult to figure out
  73.       if(this.dragging){
  74.         lastX = this.mousepos[0];
  75.         curX = (evt.clientX || evt.pageX);
  76.         lastY = this.mousepos[1];
  77.         curY = (evt.clientY || evt.pageY);
  78.         if(!(lastX == curX && lastY == curY)){
  79.           console.log("mouse has moved")
  80.           if(curX > lastX){
  81.             this.style.left = (parseInt(this.style.left) + (curX - lastX)) + 'px';
  82.           }
  83.           if(curX < lastX){
  84.             this.style.left = (parseInt(this.style.left) - (lastX - curX)) + 'px';
  85.           }
  86.           if(curY > lastY){
  87.             this.style.top = (parseInt(this.style.top) + (curY - lastY)) + 'px';
  88.           }
  89.           if(curY < lastY){
  90.             this.style.top = (parseInt(this.style.top) - (lastY - curY)) + 'px';
  91.           }
  92.         }
  93.         this.mousepos[0] = curX;
  94.         this.mousepos[1] = curY;
  95.       }
  96.       return false;
  97.     }
  98.   }
  99.  
  100.   function clear(){
  101.     var imgs = document.querySelectorAll('.img_viewer');
  102.     if(imgs[0]) {
  103.       for(var i = 0; i < imgs.length; i++){
  104.         document.body.removeChild(imgs[i]);
  105.       }
  106.     } else {
  107.       console.log("No images generated by this script were found");
  108.     }
  109.   }
  110.  
  111.   var imgs = document.querySelectorAll('img[src]'), i;
  112.   if(imgs[0]){
  113.     for(i = 0; i < imgs.length; i++){
  114.       if(imgs[i].src){
  115.         imgs[i].oncontextmenu = function(){
  116.           push(this.src);
  117.           return false;
  118.         }
  119.       }
  120.     }
  121.   } else {
  122.     console.log("Something has gone wrong!");
  123.   }
  124.   document.body.onkeydown = function(evt){
  125.     if(evt.keyCode == 27){ // Escape key
  126.       clear();
  127.     }
  128.     if(evt.keyCode == 17){ // Ctrl
  129.       clear();
  130.       initialize(1);
  131.     }
  132.   }
  133.   if(!init){
  134.     console.log("Image Viewer successfully started up!");
  135.     console.log("Try right-clicking an image");
  136.   }else{
  137.     console.log("Queue updated");
  138.   }
  139. })();