function ImageViewer(img){
    this.startDrag = function(e){
        if (!e) {
            var e = window.event;
        }
		if (e.target.tagName != 'IMG') return;
        offsetX = e.clientX;
        offsetY = e.clientY;

        if(!e.target.style.left) e.target.style.left='0px';
        if(!e.target.style.top) e.target.style.top='0px';

        var coordX = parseInt(e.target.style.left);
        var coordY = parseInt(e.target.style.top);

		img.style.cursor = "-webkit-grabbing";
        document.onmousemove = function(e){
            if (!e) {var e= window.event};
            e.target.style.left = coordX + e.clientX - offsetX + 'px';
            e.target.style.top = coordY + e.clientY - offsetY + 'px';
            return false;
        };
        return false;
    }

    this.stopDrag = function(){
		img.style.cursor = "-webkit-grab";
        document.onmousemove = null;
    }

    this.enable = function(){
        document.onmousedown = this.startDrag;
        document.onmouseup = this.stopDrag;
    }

    this.disable = function(){
        document.onmousedown = null;
        document.onmouseup = null;
    }

	this.zoomin = function(){
		img.width = parseInt(img.width * 1.25);
		img.height = parseInt(img.height * 1.25);
	}

	this.zoomout = function(){
		img.width = parseInt(img.width * 0.8);
		img.height = parseInt(img.height * 0.8);
	}

	this.original = function(fitWindow){
    if(img.naturalWidth < window.innerWidth || fitWindow != true){
		    img.width = img.naturalWidth;
		    img.height = img.naturalHeight;
    }
    else{
        img.width = window.innerWidth * 0.8;
        img.height = img.naturalHeight * window.innerWidth * 0.8 / img.naturalWidth
    }
	}

	this.init = function(){
		var newNode = document.createElement("span");
		newNode.className = "image-viewer-fixed-element";
		newNode.innerHTML = '<div class="btn-group">'
		    + '<button class="btn btn-default" id="image-viewer-zoomin"><span class="glyphicon glyphicon-zoom-in"></span></button>'
			+ '<button class="btn btn-default" id="image-viewer-zoomout"><span class="glyphicon glyphicon-zoom-out"></span></button>'
			+ '<button class="btn btn-default" id="image-viewer-original"><span class="glyphicon glyphicon-picture"></span></button>'
			+ '</div>';
		document.body.insertBefore(newNode, img)
		document.getElementById("image-viewer-zoomin").onclick = this.zoomin;
		document.getElementById("image-viewer-zoomout").onclick = this.zoomout;
		document.getElementById("image-viewer-original").onclick = this.original;
		img.style.position = "relative";
		img.style.cursor = "-webkit-grab";
		img.style.left = "50px";
		img.style.top = "50px";
		this.original(true);
		this.enable();
	}
}

(function(){
	var defaultImg = document.getElementsByTagName('img')[0];
  var newImg = document.createElement('img');
  var parent = defaultImg.parentElement;
  parent.removeChild(defaultImg);
  parent.insertBefore(newImg, null);
	newImg.onload = function(){
    var imageViewer = new ImageViewer(newImg);
	   imageViewer.init();
  }
  newImg.src = defaultImg.src;
})();

@@ -1747,24 +1747,45 @@
 %0A    %7D%0D%0A%09%7D%0D%0A
+    var _this = this;
 %0D%0A%09this.init
@@ -2615,16 +2615,671 @@
 ginal;%0D%0A
+        // capture %60ctrl + mousewheel%60 event%0D%0A        window.addEventListener('mousewheel', function(e) %7B%0D%0A            if (e.ctrlKey) %7B%0D%0A                if (e.wheelDelta %3E 0) %7B%0D%0A                    _this.zoomin();%0D%0A                %7D else %7B%0D%0A                    _this.zoomout();%0D%0A                %7D%0D%0A                e.preventDefault();%0D%0A            %7D%0D%0A        %7D);%0D%0A        // capture %60ctrl + 0%60 keypress event%0D%0A        window.addEventListener('keydown', function(e) %7B%0D%0A            console.log('keydown', e)%0D%0A            if (e.keyCode === 48 && e.ctrlKey) %7B%0D%0A                _this.original();%0D%0A                e.preventDefault();%0D%0A            %7D%0D%0A        %7D)%0D%0A
 %09%09img.st

add some shortcuts