Before-After TwentyTwenty jQuery plugin

Developer
Oloman
Size
6,257 Kb
Views
54,648
  1. Before-After TwentyTwenty jQuery plugin Previews
  2. Before-After TwentyTwenty jQuery plugin HTML Codes
  3. Before-After TwentyTwenty jQuery plugin CSS Codes
  4. Before-After TwentyTwenty jQuery plugin JS Codes

How do I make an before-after twentytwenty jquery plugin?

What is a before-after twentytwenty jquery plugin? How do you make a before-after twentytwenty jquery plugin? This script and codes were developed by Oloman on 22 August 2022, Monday.

Before-After TwentyTwenty jQuery plugin Previews
IQ Test

Before-After TwentyTwenty jQuery plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Before-After TwentyTwenty jQuery plugin</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eee;
}
.credits { margin: 20px auto; text-align: center;
}
#beforeafter { width: 800px; max-width: 100%; margin: 0 auto;
}
/* Plugin CSS */
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px;
}
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px;
}
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%;
}
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;
}
.twentytwenty-before-label,
.twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px;
}
.twentytwenty-vertical .twentytwenty-before-label:before,
.twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px;
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow,
.twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute;
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow { top: 50%; margin-top: -6px;
}
.twentytwenty-up-arrow,
.twentytwenty-down-arrow { left: 50%; margin-left: -6px;
}
.twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none;
}
.twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block;
}
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0);
}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0;
}
.twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
.twentytwenty-before-label { opacity: 0;
}
.twentytwenty-before-label:before { content: "Antes";
}
.twentytwenty-after-label { opacity: 0;
}
.twentytwenty-after-label:before { content: "Después";
}
.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 { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25;
}
.twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5);
}
.twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1;
}
.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 white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer;
}
.twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-left-arrow { border-right: 6px solid white; left: 50%; margin-left: -17px;
}
.twentytwenty-right-arrow { border-left: 6px solid white; right: 50%; margin-right: -17px;
}
.twentytwenty-up-arrow { border-bottom: 6px solid white; top: 50%; margin-top: -17px;
}
.twentytwenty-down-arrow { border-top: 6px solid white; bottom: 50%; margin-bottom: -17px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="beforeafter" class="twentytwenty-container"> <img src="http://lorempixel.com/800/300/sports/2/" alt="Antes"> <img src="http://lorempixel.com/800/300/sports/3" alt="Después" />
</div>
<div class="credits"> Credits: <a href="http://zurb.com/playground/twentytwenty">ZURB Studios</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Before-After TwentyTwenty jQuery plugin - Script Codes CSS Codes

body { background: #eee;
}
.credits { margin: 20px auto; text-align: center;
}
#beforeafter { width: 800px; max-width: 100%; margin: 0 auto;
}
/* Plugin CSS */
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px;
}
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px;
}
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%;
}
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;
}
.twentytwenty-before-label,
.twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px;
}
.twentytwenty-vertical .twentytwenty-before-label:before,
.twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px;
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow,
.twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute;
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow { top: 50%; margin-top: -6px;
}
.twentytwenty-up-arrow,
.twentytwenty-down-arrow { left: 50%; margin-left: -6px;
}
.twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none;
}
.twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block;
}
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0);
}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0;
}
.twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
.twentytwenty-before-label { opacity: 0;
}
.twentytwenty-before-label:before { content: "Antes";
}
.twentytwenty-after-label { opacity: 0;
}
.twentytwenty-after-label:before { content: "Después";
}
.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 { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25;
}
.twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5);
}
.twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1;
}
.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 white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer;
}
.twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-left-arrow { border-right: 6px solid white; left: 50%; margin-left: -17px;
}
.twentytwenty-right-arrow { border-left: 6px solid white; right: 50%; margin-right: -17px;
}
.twentytwenty-up-arrow { border-bottom: 6px solid white; top: 50%; margin-top: -17px;
}
.twentytwenty-down-arrow { border-top: 6px solid white; bottom: 50%; margin-bottom: -17px;
}

Before-After TwentyTwenty jQuery plugin - Script Codes JS Codes

!function(t){t.fn.twentytwenty=function(e){var e=t.extend({default_offset_pct:.5,orientation:"horizontal"},e);return this.each(function(){var n=e.default_offset_pct,i=t(this),a=e.orientation,s="vertical"===a?"down":"left",d="vertical"===a?"up":"right";i.wrap("<div class='twentytwenty-wrapper twentytwenty-"+a+"'></div>"),i.append("<div class='twentytwenty-overlay'></div>");var r=i.find("img:first"),w=i.find("img:last");i.append("<div class='twentytwenty-handle'></div>");var c=i.find(".twentytwenty-handle");c.append("<span class='twentytwenty-"+s+"-arrow'></span>"),c.append("<span class='twentytwenty-"+d+"-arrow'></span>"),i.addClass("twentytwenty-container"),r.addClass("twentytwenty-before"),w.addClass("twentytwenty-after");var o=i.find(".twentytwenty-overlay");o.append("<div class='twentytwenty-before-label'></div>"),o.append("<div class='twentytwenty-after-label'></div>");var f=function(t){var e=r.width(),n=r.height();return{w:e+"px",h:n+"px",cw:t*e+"px",ch:t*n+"px"}},l=function(t){"vertical"===a?r.css("clip","rect(0,"+t.w+","+t.ch+",0)"):r.css("clip","rect(0,"+t.cw+","+t.h+",0)"),i.css("height",t.h)},v=function(t){var e=f(t);c.css("vertical"===a?"top":"left","vertical"===a?e.ch:e.cw),l(e)};t(window).on("resize.twentytwenty",function(){v(n)});var p=0,y=0;c.on("movestart",function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX<t.distY&&t.distX>-t.distY)&&"vertical"!==a?t.preventDefault():(t.distX<t.distY&&t.distX<-t.distY||t.distX>t.distY&&t.distX>-t.distY)&&"vertical"===a&&t.preventDefault(),i.addClass("active"),p=i.offset().left,offsetY=i.offset().top,y=r.width(),imgHeight=r.height()}),c.on("moveend",function(){i.removeClass("active")}),c.on("move",function(t){i.hasClass("active")&&(n="vertical"===a?(t.pageY-offsetY)/imgHeight:(t.pageX-p)/y,0>n&&(n=0),n>1&&(n=1),v(n))}),i.find("img").on("mousedown",function(t){t.preventDefault()}),t(window).trigger("resize.twentytwenty")})}}(jQuery);
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t,e){function n(t){function e(){a?(n(),O(e),i=!0,a=!1):i=!1}var n=t,a=!1,i=!1;this.kick=function(){a=!0,i||e()},this.end=function(t){var e=n;t&&(i?(n=a?function(){e(),t()}:t,a=!0):t())}}function a(){return!0}function i(){return!1}function o(t){t.preventDefault()}function r(t){z[t.target.tagName.toLowerCase()]||t.preventDefault()}function u(t){return 1===t.which&&!t.ctrlKey&&!t.altKey}function c(t,e){var n,a;if(t.identifiedTouch)return t.identifiedTouch(e);for(n=-1,a=t.length;++n<a;)if(t[n].identifier===e)return t[n]}function d(t,e){var n=c(t.changedTouches,e.identifier);if(n&&(n.pageX!==e.pageX||n.pageY!==e.pageY))return n}function m(t){var e;u(t)&&(e={target:t.target,startX:t.pageX,startY:t.pageY,timeStamp:t.timeStamp},K(document,Q.move,f,e),K(document,Q.cancel,s,e))}function f(t){var e=t.data;X(t,e,t,v)}function s(){v()}function v(){L(document,Q.move,f),L(document,Q.cancel,s)}function p(t){var e,n;z[t.target.tagName.toLowerCase()]||(e=t.changedTouches[0],n={target:e.target,startX:e.pageX,startY:e.pageY,timeStamp:t.timeStamp,identifier:e.identifier},K(document,B.move+"."+e.identifier,g,n),K(document,B.cancel+"."+e.identifier,h,n))}function g(t){var e=t.data,n=d(t,e);n&&X(t,e,n,l)}function h(t){var e=t.data,n=c(t.changedTouches,e.identifier);n&&l(e.identifier)}function l(t){L(document,"."+t,g),L(document,"."+t,h)}function X(t,e,n,a){var i=n.pageX-e.startX,o=n.pageY-e.startY;C*C>i*i+o*o||y(t,e,n,i,o,a)}function Y(){return this._handled=a,!1}function w(t){t._handled()}function y(t,e,n,a,i,o){{var r,u;e.target}r=t.targetTouches,u=t.timeStamp-e.timeStamp,e.type="movestart",e.distX=a,e.distY=i,e.deltaX=a,e.deltaY=i,e.pageX=n.pageX,e.pageY=n.pageY,e.velocityX=a/u,e.velocityY=i/u,e.targetTouches=r,e.finger=r?r.length:1,e._handled=Y,e._preventTouchmoveDefault=function(){t.preventDefault()},N(e.target,e),o(e.identifier)}function T(t){var e=t.data.timer;t.data.touch=t,t.data.timeStamp=t.timeStamp,e.kick()}function S(t){var e=t.data.event,n=t.data.timer;k(),F(e,n,function(){setTimeout(function(){L(e.target,"click",i)},0)})}function k(){L(document,Q.move,T),L(document,Q.end,S)}function _(t){var e=t.data.event,n=t.data.timer,a=d(t,e);a&&(t.preventDefault(),e.targetTouches=t.targetTouches,t.data.touch=a,t.data.timeStamp=t.timeStamp,n.kick())}function q(t){var e=t.data.event,n=t.data.timer,a=c(t.changedTouches,e.identifier);a&&(A(e),F(e,n))}function A(t){L(document,"."+t.identifier,_),L(document,"."+t.identifier,q)}function D(t,e,n){var a=n-t.timeStamp;t.type="move",t.distX=e.pageX-t.startX,t.distY=e.pageY-t.startY,t.deltaX=e.pageX-t.pageX,t.deltaY=e.pageY-t.pageY,t.velocityX=.3*t.velocityX+.7*t.deltaX/a,t.velocityY=.3*t.velocityY+.7*t.deltaY/a,t.pageX=e.pageX,t.pageY=e.pageY}function F(t,e,n){e.end(function(){return t.type="moveend",N(t.target,t),n&&n()})}function R(){return K(this,"movestart.move",w),!0}function x(){return L(this,"dragstart drag",o),L(this,"mousedown touchstart",r),L(this,"movestart",w),!0}function b(t){"move"!==t.namespace&&"moveend"!==t.namespace&&(K(this,"dragstart."+t.guid+" drag."+t.guid,o,e,t.selector),K(this,"mousedown."+t.guid,r,e,t.selector))}function j(t){"move"!==t.namespace&&"moveend"!==t.namespace&&(L(this,"dragstart."+t.guid+" drag."+t.guid),L(this,"mousedown."+t.guid))}var C=6,K=t.event.add,L=t.event.remove,N=function(e,n,a){t.event.trigger(n,a,e)},O=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(function(){t()},25)}}(),z={textarea:!0,input:!0,select:!0,button:!0},Q={move:"mousemove",cancel:"mouseup dragstart",end:"mouseup"},B={move:"touchmove",cancel:"touchend",end:"touchend"};t.event.special.movestart={setup:R,teardown:x,add:b,remove:j,_default:function(t){function a(){D(o,r.touch,r.timeStamp),N(t.target,o)}var o,r;t._handled()&&(o={target:t.target,startX:t.startX,startY:t.startY,pageX:t.pageX,pageY:t.pageY,distX:t.distX,distY:t.distY,deltaX:t.deltaX,deltaY:t.deltaY,velocityX:t.velocityX,velocityY:t.velocityY,timeStamp:t.timeStamp,identifier:t.identifier,targetTouches:t.targetTouches,finger:t.finger},r={event:o,timer:new n(a),touch:e,timeStamp:e},t.identifier===e?(K(t.target,"click",i),K(document,Q.move,T,r),K(document,Q.end,S,r)):(t._preventTouchmoveDefault(),K(document,B.move+"."+t.identifier,_,r),K(document,B.end+"."+t.identifier,q,r)))}},t.event.special.move={setup:function(){K(this,"movestart.move",t.noop)},teardown:function(){L(this,"movestart.move",t.noop)}},t.event.special.moveend={setup:function(){K(this,"movestart.moveend",t.noop)},teardown:function(){L(this,"movestart.moveend",t.noop)}},K(document,"mousedown.move",m),K(document,"touchstart.move",p),"function"==typeof Array.prototype.indexOf&&!function(t){for(var e=["changedTouches","targetTouches"],n=e.length;n--;)-1===t.event.props.indexOf(e[n])&&t.event.props.push(e[n])}(t)});
$(window).load(function() { $("#beforeafter").twentytwenty();
});
Before-After TwentyTwenty jQuery plugin - Script Codes
Before-After TwentyTwenty jQuery plugin - Script Codes
Home Page Home
Developer Oloman
Username oloman
Uploaded August 22, 2022
Rating 3
Size 6,257 Kb
Views 54,648
Do you need developer help for Before-After TwentyTwenty jQuery plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oloman (oloman) Script Codes
Name
Simplest RWD jQuery slider
CSS - Colorful fan menu
CSS - Circular drop menu
CSS Drop cards Social buttons
Simplest RWD jQuery slider
Scotch tape css effect
Book 3D
CSS Responsive accordion social buttons
CSS responsive football pitch
Responsive video loader
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!