Widget:Twentytwenty
<html>
<img src= /> <img src= />
<script type="text/javascript">
!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="/dist/",e(0)}([function(t,e,n){n(1);var r=n(5);!function(t){t.fn.twentytwenty=function(e){return e=t.extend({defaultOffsetPct:.5,orientation:"horizontal"},e),this.each(function(){var n=!1,o=e.defaultOffsetPct,a=t(this),i=e.orientation,y="vertical"===i?"down":"left",f="vertical"===i?"up":"right";a.wrap('
'),a.append('
');var l=a.find("img:first"),w=a.find("img:last");a.append('
');var s=a.find(".twentytwenty-handle");s.append(''),s.append(''),a.addClass("twentytwenty-container"),l.addClass("twentytwenty-before"),w.addClass("twentytwenty-after");var p=a.find(".twentytwenty-overlay");p.append('
'),p.append('
');var c=function(t,e,n,o){a.css({width:t+"px",height:e+"px"}),r.isHorizontal(i)?(l.css("clip","rect(0,"+n+"px, "+e+"px, 0)"),s.css("left",n+"px")):(l.css("clip","rect(0,"+t+"px, "+o+"px, 0)"),s.css("top",o+"px"))},d=function(t){var e=l[0].offsetWidth,n=l[0].offsetHeight,o=r.calcOffset(a,t),y=r.isHorizontal(i)?o.x/e:o.y/n,f=r.getDimensions(l,y);r.isHorizontal(i)?(l.css("clip","rect(0,"+o.x+"px, "+f.h+"px, 0)"),s.css("left",o.x+"px")):(l.css("clip","rect(0,"+f.w+"px, "+o.y+"px, 0)"),s.css("top",o.y+"px"))};if(a.on("mousedown",function(t){n=!0,a.addClass("active"),d(t)}).on("mousemove",function(t){n&&d(t)}).on("mouseup",function(t){d(t),a.removeClass("active"),n=!1}),0===l[0].offsetHeight)l.on("load",function(){var t=r.getDimensions(l,o);c(t.w,t.h,t.xOffset,t.yOffset)});else{var u=r.getDimensions(l,o);c(u.w,u.h,u.xOffset,u.yOffset)}})}}(jQuery)},function(t,e,n){var r=n(2);"string"==typeof r&&(r=t.id,r,"");n(4)(r,{});r.locals&&(t.exports=r.locals)},function(t,e,n){e=t.exports=n(3)(),e.push([t.id,'.twentytwenty-horizontal .twentytwenty-handle:after,.twentytwenty-horizontal .twentytwenty-handle:before,.twentytwenty-vertical .twentytwenty-handle:after,.twentytwenty-vertical .twentytwenty-handle:before{content:" ";display:block;background:#fff;position:absolute;z-index:30;box-shadow:0 0 12px rgba(51,51,51,.5)}.twentytwenty-horizontal .twentytwenty-handle:after,.twentytwenty-horizontal .twentytwenty-handle:before{width:3px;height:9999px;left:50%;margin-left:-1.5px}.twentytwenty-vertical .twentytwenty-handle:after,.twentytwenty-vertical .twentytwenty-handle:before{width:9999px;height:3px;top:50%;margin-top:-1.5px}.twentytwenty-after-label,.twentytwenty-before-label,.twentytwenty-overlay{position:absolute;top:0;width:100%;height:100%;transition-duration:.5s}.twentytwenty-after-label,.twentytwenty-before-label{transition-property:opacity}.twentytwenty-after-label:before,.twentytwenty-before-label:before{color:#fff;font-size:13px;letter-spacing:.1em;position:absolute;background:hsla(0,0%,100%,.2);line-height:38px;padding:0 20px;border-radius:2px}.twentytwenty-horizontal .twentytwenty-after-label:before,.twentytwenty-horizontal .twentytwenty-before-label:before{top:50%;margin-top:-19px}.twentytwenty-vertical .twentytwenty-after-label:before,.twentytwenty-vertical .twentytwenty-before-label:before{left:50%;margin-left:-45px;text-align:center;width:90px}.twentytwenty-down-arrow,.twentytwenty-left-arrow,.twentytwenty-right-arrow,.twentytwenty-up-arrow{width:0;height:0;border:6px inset transparent;position:absolute}.twentytwenty-left-arrow,.twentytwenty-right-arrow{top:50%;margin-top:-6px}.twentytwenty-down-arrow,.twentytwenty-up-arrow{left:50%;margin-left:-6px}.twentytwenty-container{box-sizing:content-box;z-index:0;overflow:hidden;position:relative}.twentytwenty-container img{max-width:100%;position:absolute;top:0;display:block}.twentytwenty-container.active .twentytwenty-overlay,.twentytwenty-container.active :hover.twentytwenty-overlay{background:transparent}.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label,.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label{opacity:0}.twentytwenty-container *{box-sizing:content-box}.twentytwenty-before-label{opacity:0}.twentytwenty-before-label:before{content:"Before"}.twentytwenty-after-label{opacity:0}.twentytwenty-after-label:before{content:"After"}.twentytwenty-horizontal .twentytwenty-before-label:before{left:10px}.twentytwenty-horizontal .twentytwenty-after-label:before{right:10px}.twentytwenty-vertical .twentytwenty-before-label:before{top:10px}.twentytwenty-vertical .twentytwenty-after-label:before{bottom:10px}.twentytwenty-overlay{transition-property:background;background:transparent;z-index:25}.twentytwenty-overlay:hover{background:rgba(0,0,0,.5)}.twentytwenty-overlay:hover .twentytwenty-after-label,.twentytwenty-overlay:hover .twentytwenty-before-label{opacity:1}.twentytwenty-before{z-index:20}.twentytwenty-after{z-index:10}.twentytwenty-handle{height:38px;width:38px;position:absolute;left:50%;top:50%;margin-left:-22px;margin-top:-22px;border:3px solid #fff;border-radius:1000px;box-shadow:0 0 12px rgba(51,51,51,.5);z-index:40;cursor:pointer}.twentytwenty-horizontal .twentytwenty-handle:before{bottom:50%;margin-bottom:22px;box-shadow:0 3px 0 #fff,0 0 12px rgba(51,51,51,.5)}.twentytwenty-horizontal .twentytwenty-handle:after{top:50%;margin-top:22px;box-shadow:0 -3px 0 #fff,0 0 12px rgba(51,51,51,.5)}.twentytwenty-vertical .twentytwenty-handle:before{left:50%;margin-left:22px;box-shadow:3px 0 0 #fff,0 0 12px rgba(51,51,51,.5)}.twentytwenty-vertical .twentytwenty-handle:after{right:50%;margin-right:22px;box-shadow:-3px 0 0 #fff,0 0 12px rgba(51,51,51,.5)}.twentytwenty-left-arrow{border-right:6px solid #fff;left:50%;margin-left:-17px}.twentytwenty-right-arrow{border-left:6px solid #fff;right:50%;margin-right:-17px}.twentytwenty-up-arrow{border-bottom:6px solid #fff;top:50%;margin-top:-17px}.twentytwenty-down-arrow{border-top:6px solid #fff;bottom:50%;margin-bottom:-17px}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=null,e,"");for(var r={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(r[a]=!0)}for(o=0;o<e.length;o++){var i=e[o];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},function(t,e,n){function r(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=c[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(l(r.parts[a],e))}else{for(var i=[],a=0;a<r.parts.length;a++)i.push(l(r.parts[a],e));c[r.id]={id:r.id,refs:1,parts:i}}}}function o(t){for(var e=[],n={},r=0;r<t.length;r++){var o=t[r],a=o[0],i=o[1],y=o[2],f=o[3],l={css:i,media:y,sourceMap:f};n[a]?n[a].parts.push(l):e.push(n[a]={id:a,parts:[l]})}return e}function a(t,e){var n=h(),r=x[x.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),x.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function i(t){t.parentNode.removeChild(t);var e=x.indexOf(t);e>=0&&x.splice(e,1)}function y(t){var e=document.createElement("style");return e.type="text/css",a(t,e),e}function f(t){var e=document.createElement("link");return e.rel="stylesheet",a(t,e),e}function l(t,e){var n,r,o;if(e.singleton){var a=v++;n=b||(b=y(e)),r=w.bind(null,n,a,!1),o=w.bind(null,n,a,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=f(e),r=p.bind(null,n),o=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=y(e),r=s.bind(null,n),o=function(){i(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}function w(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=g(e,o);else{var a=document.createTextNode(o),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(a,i[e]):t.appendChild(a)}}function s(t,e){var n=e.css,r=e.media;e.sourceMap;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function p(t,e){var n=e.css,r=(e.media,e.sourceMap);r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(o),a&&URL.revokeObjectURL(a)}var c={},d=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},u=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),h=d(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,v=0,x=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=u()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=o(t);return r(n,e),function(t){for(var a=[],i=0;i<n.length;i++){var y=n[i],f=c[y.id];f.refs--,a.push(f)}if(t){var l=o(t);r(l,e)}for(var i=0;i<a.length;i++){var f=a[i];if(0===f.refs){for(var w=0;w<f.parts.length;w++)f.parts[w]();delete c[f.id]}}}};var g=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e,n){var r,o;r=[],o=function(){var t={};t.version="2.0.0-beta1",t.isHorizontal=function(t){return"horizontal"===t},t.calcOffset=function(t,n){var r=t[0].getBoundingClientRect(),o=e(n);return{x:o.x-Math.abs(r.left),y:o.y-Math.abs(r.top)}};var e=function(t){return"undefined"!=typeof t.touches?{x:t.touches[0].clientX,y:t.touches[0].clientY}:{x:t.clientX,y:t.clientY}},n=!1;return t.fireOnMovement=function(t,e){n||(n=!0,requestAnimationFrame(function(){t(e),n=!1}))},t.getDimensions=function(t,e){var n=t[0].offsetWidth,r=t[0].offsetHeight;return{w:n,h:r,xOffset:n*e,yOffset:r*e}},t}.apply(e,r),!(void 0!==o&&(t.exports=o))}]);
$(function(){
$('.twentytwenty-container').twentytwenty();
}); </script>
<style> .twentytwenty-wrapper {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
} .twentytwenty-overlay {
display: none;
} </style>
<script src="//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/2.0.0-beta.1/jquery.twentytwenty.min.js"></script>
</html>
