1 line
2.3 KiB
JavaScript
1 line
2.3 KiB
JavaScript
(function(a){a.fn.twentytwenty=function(b){var b=a.extend({default_offset_pct:0.5,orientation:"horizontal",slider_move:"drag"},b);return this.each(function(){var h=b.default_offset_pct;var e=a(this);var c=b.orientation;var q=(c==="vertical")?"down":"left";var d=(c==="vertical")?"up":"right";e.wrap("<div class='twentytwenty-wrapper twentytwenty-"+c+"'></div>");e.append("<div class='twentytwenty-overlay'></div>");var r=e.find("img:first");var o=e.find("img:last");e.append("<div class='twentytwenty-handle'></div>");var f=e.find(".twentytwenty-handle");f.append("<span class='twentytwenty-"+q+"-arrow'></span>");f.append("<span class='twentytwenty-"+d+"-arrow'></span>");e.addClass("twentytwenty-container");r.addClass("twentytwenty-before");o.addClass("twentytwenty-after");var j=e.find(".twentytwenty-overlay");j.append("<div class='twentytwenty-before-label'></div>");j.append("<div class='twentytwenty-after-label'></div>");var l=e.find("div.twentytwenty-before-label");var k=e.find("div.twentytwenty-after-label");var i=function(t){var s=r.width();var u=r.height();return{w:s+"px",h:u+"px",cw:(t*s)+"px",ch:(t*u)+"px"}};var g=function(s){if(c==="vertical"){r.css("clip","rect(0,"+s.w+","+s.ch+",0)")}else{r.css("clip","rect(0,"+s.cw+","+s.h+",0)");l.css("clip","rect(0,"+s.cw+","+s.h+",0)");k.css("clip","rect(0,"+s.w+","+s.h+","+s.cw+")")}e.css("height",s.h)};var n=function(s){var t=i(s);f.css((c==="vertical")?"top":"left",(c==="vertical")?t.ch:t.cw);g(t)};a(window).on("resize.twentytwenty",function(s){n(h)});var m=0;var p=0;if(b.slider_move=="drag"){f.on("movestart",function(s){if(((s.distX>s.distY&&s.distX<-s.distY)||(s.distX<s.distY&&s.distX>-s.distY))&&c!=="vertical"){s.preventDefault()}else{if(((s.distX<s.distY&&s.distX<-s.distY)||(s.distX>s.distY&&s.distX>-s.distY))&&c==="vertical"){s.preventDefault()}}e.addClass("active");m=e.offset().left;offsetY=e.offset().top;p=r.width();imgHeight=r.height()});f.on("moveend",function(s){e.removeClass("active")});f.on("move",function(s){if(e.hasClass("active")){h=(c==="vertical")?(s.pageY-offsetY)/imgHeight:(s.pageX-m)/p;if(h<0){h=0}if(h>1){h=1}n(h)}})}else{e.mousemove(function(s){h=(c==="vertical")?(s.pageY-e.offset().top)/r.height():(s.pageX-e.offset().left)/r.width();if(h<0){h=0}if(h>1){h=1}n(h)})}e.find("img").on("mousedown",function(s){s.preventDefault()});a(window).trigger("resize.twentytwenty")})}})(jQuery); |