You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
11 lines
13 KiB
JavaScript
11 lines
13 KiB
JavaScript
|
|
/**
|
|
* jquery.verySimpleImageViewer.js
|
|
* Ver. : 1.0.2
|
|
* last update: 05/08/2018
|
|
* Author: meshesha , https://github.com/meshesha
|
|
* LICENSE: MIT
|
|
* url:https://meshesha.github.io/verySimpleImageViewer
|
|
*/
|
|
!function(e){function t(e,t){if("number"==typeof e)return e;var o=e.indexOf(t);return parseInt(e.substring(0,-1!=o?o:e.length))}function o(e){var t=0,o=0;return e||(e=window.event),e.pageX||e.pageY?(t=e.pageX,o=e.pageY):(e.clientX||e.clientY)&&(t=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,o=e.clientY+document.body.scrollTop+document.documentElement.scrollTop),[t,o]}e.fn.verySimpleImageViewer=function(n){var i=e.extend({imageSource:"",frame:["720px","480px",!0],maxZoom:"300%",zoomFactor:"10%",saveZoomPos:!0,setZoomPos:[],mouse:!0,keyboard:!0,toolbar:!0,rotateToolbar:!1},n),r=i.imageSource,a=i.frame,s=i.maxZoom,m=i.zoomFactor,l=i.saveZoomPos,d=i.setZoomPos,u=i.mouse,c=i.keyboard,f=i.toolbar,g=i.rotateToolbar,p=this,A=e(this)[0],v=A.id,h=null,y=0;p.frameElement=null;var w,E,C=0,I=null,b=5;if(p.getFrameDimension=function(){return[p.frameElement.clientWidth,p.frameElement.clientHeight]},p.setDimension=function(e,t){h.width=Math.round(e),h.height=Math.round(t)},p.getDimension=function(){return[h.width,h.height]},p.setPosition=function(e,t){h.style.left=Math.round(e)+"px",h.style.top=Math.round(t)+"px"},p.getPosition=function(){return[t(h.style.left,"px"),t(h.style.top,"px")]},p.setMouseCursor=function(){var e=p.getDimension(),t=p.getFrameDimension(),o="crosshair";e[0]>t[0]&&e[1]>t[1]?o="move":e[0]>t[0]?o="e-resize":e[1]>t[1]&&(o="n-resize"),h.style.cursor=o},p.maxZoomCheck=function(e,t){if(void 0===e||void 0===t){var o=p.getDimension();e=o[0],t=o[1]}return"number"==typeof s?e/w>s||t/E>s:"object"==typeof s?e>s[0]||t>s[1]:void 0},p.fitToFrame=function(e,t){void 0!==e&&void 0!==t||(e=w,t=E);var o,n,i=p.getFrameDimension();return o=i[0],(n=Math.round(o*t/e))>i[1]&&(n=i[1],o=Math.round(n*e/t)),[o,n]},p.getZoomLevel=function(){return C},p.zoomTo=function(e,t,o){var n=p.getFrameDimension();if(e<0||t<0||o<0||t>=n[0]||o>=n[1])return!1;for(var i=p.fitToFrame(w,E),r=e;r>0;r--)i[0]*=m,i[1]*=m;var a=h.width,s=h.height,d=p.getPosition();return d[0]-=(t-d[0])*(i[0]/a-1),d[1]-=(o-d[1])*(i[1]/s-1),d=p.centerImage(i[0],i[1],d[0],d[1]),!p.maxZoomCheck(i[0],i[1])&&(p.setZoomPosition(e,i[0],i[1],d[0],d[1]),l&&"undefined"!=typeof Storage&&(localStorage.setItem(v+"_zoomlvl",C),localStorage.setItem(v+"_dimensionx",i[0]),localStorage.setItem(v+"_dimensiony",i[1]),localStorage.setItem(v+"_positionx",d[0]),localStorage.setItem(v+"_positiony",d[1])),!0)},p.setZoomPosition=function(e,t,o,n,i){C=parseInt(e),p.setDimension(t,o),p.setPosition(n,i),p.setMouseCursor()},p.getZoomInf=function(){var e=p.getDimension(),t=p.getPosition();console.log("[zoomLevel, dimensionX, dimensionY, positionX, positionY]="),console.log("[",C,",",e[0],",",e[1],",",t[0],",",t[1],"]")},p.centerImage=function(e,t,o,n){var i;void 0!==e&&void 0!==t||(e=(i=p.getDimension())[0],t=i[1]);void 0!==o&&void 0!==n||(o=(i=p.getPosition())[0],n=i[1]);var r=p.getFrameDimension();return e<=r[0]&&(o=Math.round((r[0]-e)/2)),t<=r[1]&&(n=Math.round((r[1]-t)/2)),e>r[0]&&(o>0?o=0:o+e<r[0]&&(o=r[0]-e)),t>r[1]&&(n>0?n=0:n+t<r[1]&&(n=r[1]-t)),[o,n]},p.rotate=function(t,o){"1"==t?y+=90:y-=90,o?e("."+p.frameElement.className+" .jqvsiv_main_image_content").css("transform","rotate(0deg)"):e("."+p.frameElement.className+" .jqvsiv_main_image_content").css("transform","rotate("+y+"deg)")},p.reset=function(){var e=p.fitToFrame(w,E),t=p.centerImage(e[0],e[1],0,0);p.setDimension(e[0],e[1]),p.setPosition(t[0],t[1]),C=0,p.rotate("1",!0)},p.onmousewheel=function(e,t,n){if(p.frameElement.focus(),e?e.preventDefault&&e.preventDefault():(e=window.event).returnValue=!1,C+n>=0){var i=o(e),r=function(e){var t,o;if(objectCopy=e,e.offsetParent){t=o=0;do{t+=e.offsetLeft,""!=e.style.borderLeftWidth?t+=parseInt(e.style.borderLeftWidth):e.style.borderLeftWidth="0px",o+=e.offsetTop,""!=e.style.borderTopWidth?o+=parseInt(e.style.borderTopWidth):e.style.borderTopWidth="0px"}while(e=e.offsetParent)}return[t-parseInt(objectCopy.style.borderLeftWidth),o-parseInt(objectCopy.style.borderLeftWidth)]}(p.frameElement);p.zoomTo(C+n,i[0]-r[0],i[1]-r[1])}},p.onmousemove=function(e){e?e.preventDefault&&e.preventDefault():(e=window.event).returnValue=!1;var t=o(e),n=p.getPosition();n[0]+=t[0]-I[0],n[1]+=t[1]-I[1],I=t,n=p.centerImage(h.width,h.height,n[0],n[1]),p.setPosition(n[0],n[1]),l&&"undefined"!=typeof Storage&&(localStorage.setItem(v+"_positionx",n[0]),localStorage.setItem(v+"_positiony",n[1]))},p.onmouseup_or_out=function(e){e?e.preventDefault&&e.preventDefault():(e=window.event).returnValue=!1,h.onmousemove=h.onmouseup=h.onmouseout=null,h.onmousedown=p.onmousedown},p.onmousedown=function(e){p.frameElement.focus(),e?e.preventDefault&&e.preventDefault():(e=window.event).returnValue=!1,I=o(e),h.onmousemove=p.onmousemove,h.onmouseup=h.onmouseout=p.onmouseup_or_out},p.onkeypress=function(e){var t;window.event?(t=(e=window.event).keyCode,e.returnValue=!1):e.which&&(t=e.which,e.preventDefault()),t=String.fromCharCode(t);var o=p.getPosition();"a"==t?o[0]+=b:"w"==t?o[1]+=b:"d"==t?o[0]-=b:"s"==t?o[1]-=b:"c"==t||"C"==t?p.reset():"="==t||"+"==t||"x"==t||"X"==t?p.zoomTo(C+1,p.frameElement.clientWidth/2,p.frameElement.clientHeight/2):("-"==t||"z"==t||"Z"==t)&&C>0?p.zoomTo(C-1,p.frameElement.clientWidth/2,p.frameElement.clientHeight/2):"i"!=t&&"I"!=t||p.getZoomInf(),"a"!=t&&"w"!=t&&"d"!=t&&"s"!=t||(o=p.centerImage(h.width,h.height,o[0],o[1]),p.setPosition(o[0],o[1]),b+=2,l&&"undefined"!=typeof Storage&&(localStorage.setItem(v+"_positionx",o[0]),localStorage.setItem(v+"_positiony",o[1])))},p.onkeyup=function(e){b=5},p.setZoomProp=function(e,o){null==e&&(m=10),m=1+t(e,"%")/100,"string"==typeof o?s=t(o,"%")/100:"object"==typeof o&&null!=o?(s[0]=t(o[0],"px"),s[1]=t(o[1],"px")):s="300%"},p.initImage=function(){w=h.width,E=h.height;var e=p.fitToFrame(w,E);p.setDimension(e[0],e[1]),1==a[2]&&(p.frameElement.style.width=Math.round(e[0])+"px"),1==a[3]&&(p.frameElement.style.height=Math.round(e[1])+"px");var t=p.centerImage(e[0],e[1],0,0);if(p.setPosition(t[0],t[1]),p.setMouseCursor(),u&&((new function(){var e=function(e,t,o){};this.wheelHandler=function(t){var o=0;t||(t=window.event),t.wheelDelta?o=t.wheelDelta/120:t.detail&&(o=-t.detail/3),t.preventDefault&&t.preventDefault(),t.returnValue=!1,o&&e(t,this,o)},this.init=function(t,o){t.addEventListener&&t.addEventListener("DOMMouseScroll",this.wheelHandler,!1),t.onmousewheel=this.wheelHandler,e=o},this.setCallback=function(t){e=t}}).init(h,p.onmousewheel),h.onmousedown=p.onmousedown),c&&(p.frameElement.onkeypress=p.onkeypress,p.frameElement.onkeyup=p.onkeyup),f&&p.loadToolbar(p),l&&"undefined"!=typeof Storage){var o=localStorage.getItem(v+"_zoomlvl"),n=localStorage.getItem(v+"_dimensionx"),i=localStorage.getItem(v+"_dimensiony"),r=localStorage.getItem(v+"_positionx"),s=localStorage.getItem(v+"_positiony");null!==o&&p.setZoomPosition(o,n,i,r,s)}if(5==d.length){var m=d[0],g=d[1],A=d[2],y=d[3],C=d[4];p.setZoomPosition(m,g,A,y,C)}else d.length>0&&d.length<5&&console.log("Error: 'setZoomPos' setting array must contain 5 numbers: [zoomLevel, dimensionX, dimensionY, positionX, positionY].'\nclick 'i' key after zooming the image to see this information in the console.")},p.frameElement=document.createElement("div"),p.frameElement.className="image_viewer_inner_container",p.frameElement.style.width=a[0],p.frameElement.style.height=a[1],p.frameElement.style.border="0px solid #000",p.frameElement.style.margin="0px",p.frameElement.style.padding="0px",p.frameElement.style.overflow="hidden",p.frameElement.style.position="relative",p.frameElement.style.zIndex=2,p.frameElement.tabIndex=1,p.setZoomProp(m,s),null!=h)null!=A?(h.parentNode.removeChild(h),A.appendChild(p.frameElement)):h.parentNode.replaceChild(p.frameElement,h),h.style.margin=h.style.padding="0",h.style.borderWidth="0px",h.style.position="absolute",h.style.zIndex=3,p.frameElement.appendChild(h);else{null!=A&&A.appendChild(p.frameElement);var B=document.createElement("div");B.className="jqvsiv_main_image_content",(h=document.createElement("img")).style.position="absolute",h.style.zIndex=3,B.appendChild(h),p.frameElement.appendChild(B),h.onload=p.initImage,h.src=r}p.loadToolbar=function(e){var t=document.createElement("div");t.className="jqvsiv_toolbar";var o=function(e){var t;return e.keyCode?(t=e.keyCode,e.returnValue=!1):e.which&&(t=e.which,e.preventDefault()),13==t},n=document.createElement("img");n.className="jqvsiv_toolbarButton",n.title="Zoom in",n.tabIndex="1",n.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABN0lEQVRIic3WMW6DMBQGYN+EqhGJJYZMvUMHpByAKceIKpYuGUqmLjFESIm6pQORgpSJwNYoYsiQsSfB9utSUBKZYgcs1dI/4s+8Z2NQf54MMUnzAUk5Jil0kd+58v48GSJM0ryriQXJUZcrF70J0rh6wCSF/wVYfgaWn+kBRusjUMaBMg72at89MN6eoBxOGIPpRXqBhxdfCmkFyCC1wGh9hPH2VOXt67sCprsDOGFcxV4maoDlZ0AZB9lRUAZ4ttEL9NxAWK7aEtmr/VUZprtDbYme3z9re/Jnk00vqh50wljYZFEukcZdVCIqwCUitU1NL1IGSkT6HNjLBArKoKDsquZNUfuazjbQcwPpydWBm8ZrAVSRu69MGcSYBLzVpd+EGO7ijNr+togQYxJww12cH18/nn4Aw1rF5Pti/U4AAAAASUVORK5CYII=",n.onclick=n.onkeypress=function(t){if("keypress"!=(t=t||window.event).type||o(t)){var n=e.getFrameDimension();e.zoomTo(e.getZoomLevel()+1,n[0]/2,n[1]/2)}};var i=document.createElement("img");i.className="jqvsiv_toolbarButton",i.title="Zoom out",i.tabIndex="1",i.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIiWNQm7FPX2PmgbPqMw/805h54D81MNSss2oz9ukzaMw8cJZaBmPBZxmo6XJsPmGgoev/a8w88H/UglELaGiB/+rT/xO3XCQK+68+TZoF2rMO/v/z999/YsHvP3//a/Rtoq0FyrWz/6v2biQ+iHwWHfgfPW8rUdhj8pr/CtWz/itUz8KwBG8kq/ZsgGskBSNbQjAVUWoJUcmUEkuIzgfkWkJSRiPHEpJzMqmWkFVUkGIJ2VUmMZbIV87+R1GlT8gS+do5VxkobbZgs0S+cvY/+do5V5WalpgCAJUZolx/yaTFAAAAAElFTkSuQmCC",i.onclick=i.onkeypress=function(t){if("keypress"!=(t=t||window.event).type||o(t)){var n=e.getFrameDimension();e.zoomTo(e.getZoomLevel()-1,n[0]/2,n[1]/2)}};var r=document.createElement("img");if(r.className="jqvsiv_toolbarButton",r.title="Center image",r.tabIndex="1",r.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABmklEQVRIic3WvWrCUBQH8LyJomiCQwO+Q7u0bl0FX0MsqCA6CEIXa+LXJqhQQUEc2pBqEWkJlXQrzSA6VKEfLkUo5t+hNURNNNEUeuGMOb+bc8/hXsKd4WiK4QWS4WWK4WFF/OYS3BmOJiiGF6xKrBECYeXOtf6E+MPdg2J4/H+AzrURaPStBU4q9/AWOqBzbXSGr5jLMvzVrnVAU5rg4eUD3dEbAODmaQgynIcrVd8f8LA8prMvLNbt8whkOA97iIU9xK4hpoHTSwHqJQzG8ESLCrCKmAaSPUlJ/v45Q0OUcHheXQLUiGkgci0i3urBl67BcZZdS7yKbAU87E9Zkj0JEe4R1AUHZ6y0MbE6dIHjyh2a0mTpQOOtHpyxkilEF/AWOuiPp0sH6kvXYA+xphBdgM61lT5fHKi65kYRTWAxoYs+FwZjNERp7WMjiCYQaPQxl2VlQj3RIo40WtEIolsif7W7NKGbYhOysU1dqbrhdtRDts7BvoihK3NXxBbMyoYv/V0QR6IsEmaeLUYRWzArOxJlkUxfHXwDNFegvBR/iaAAAAAASUVORK5CYII=",r.onclick=r.onkeypress=function(t){("keypress"!=(t=t||window.event).type||o(t))&&e.reset()},g){var a=document.createElement("img");a.className="jqvsiv_toolbarButton",a.title="Center image",a.tabIndex="1",a.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB1ElEQVRIieXWwUvbYBjH8fwndRW7CoID3Wn3nYSdxIviQQa7bHdp62GIXvTiEBpTqUyZssKglk4UtJlawUmKshUtgtV6kMEs2m2lmpjvLrbM2TdrY3Yy8FwS+H3e503e943kCa60emVVeyirpldWcaKuszRPcKVV8sqq5lRwldIkJ0derRPpP44er6xyj4BXS2mKuoGcOuLR5KqzwJO3G6znTjEB48rk16XOSDLjDPBi4Quiq2k0ejegL75TCTvOFzCBC8Pg8PScrlCM2a1deiMb9oGD/E8A3iRSdIfjZL+f44+u4fYr9E4tVHCPRSdC4FlkC4CzYonGgEKDb+JGuf0KZ8USAB3jH4TTJQReLn0FYDN7ciu8XJvZEwCezyzS4JuoigiBnvltAHL5ghDI5QsAPB2LVO79jQiBFuUTPy50ALrD8VvhPeGPAJR0gwf+m8/+RCxf8nByH66//YFYkvbhadqGphmIJbkyTQB80bWq3ZURS6BZVpn6nBGug/daRjh9ZeTfKzmYoG9OZXnviOKlTkk3SOW+0anMW4aXq7a9KJigcfBdTYH2gDsg9W3XNpD6j8w6EFe/Yto79GtEXIFQWrL922KBuPoV0xUIpd2vZx7/Bh7Ty4bjzETnAAAAAElFTkSuQmCC",a.onclick=a.onkeypress=function(t){("keypress"!=(t=t||window.event).type||o(t))&&e.rotate("1")};var s=document.createElement("img");s.className="jqvsiv_toolbarButton",s.title="Center image",s.tabIndex="1",s.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACQklEQVRIie3W3U9SYRwH8POfcEDj0Mtcq7XVP9BVra2tyy5aba1/wQOI2dxq3rQSeQ4qIdiLthZtNcSXc0wj8zgQCSEqmHOYLwnMCBU559uFwxREXoK7nu13+/38nme/59lDMcaRJjXhvYxJkDREQC2KMQmSmvBexjjSRKkJ761VcH6pCe+latn5YTuh6hWeq/9AbYBbb+cwubi+ubG9s5PYykhDkVVcfzP7b8BxIuDSgAjiXQAABJZ+Sh3DIh7xHoRX4llJlmFyzy9UDVwZFAEAsY10+pkYRKO+G+fv9+NMex9UWjN63X7IMnB74H2gKuCO04/cevc5Aprl8NLzBR3DImiWg0prxtfVBJyBKBru2T9WDOgmwsup7Qx6Pvhx4UF/AUCzHCxuP+K/N0GzXFGkKHCKjKcbW3vDuTCa5fB0Oojp6A+cbbeBZjn0TQX2AJrl0NBmK0COnCLGOBpX6syLuYATrRY8nwnhKnFA3dKDWOIXnIEo9jeRj5QcU+axK3bTNpRSac17Icf03XgxE0JWknHx4eABYBf5e1wlgRuvxVhWkhBaXgc34YN1KoDIWhKZrAStY7IgPB8p66Jds7jmHL5v+L6WxFIyhaH5KC53vioavh8pC2CIICvb7J9KBR5WZb9FjGlcUhmsYt2AXWQsSxusnroBGiJAY+IzSoN1tmyAIYJcKcJ0jW0pW574S4UrWCJRDBF8Fe+CCGC6+LRCbwkeCTRzQepkp+t01d8W02hKqTv4nOQ6VzRzQdVd+7k/U9So5+j1RlYAAAAASUVORK5CYII=",s.onclick=s.onkeypress=function(t){("keypress"!=(t=t||window.event).type||o(t))&&e.rotate("-1")}}t.appendChild(n),t.appendChild(i),g&&(t.appendChild(a),t.appendChild(s)),t.appendChild(r),e.frameElement.appendChild(t)}}}(jQuery);
|