https://www.thebarkboutique.com/wp-content/themes/topfit/assets/js…/plugins/jquery.twentytwenty.js?ver=6.8.10

1(function($){
2	
3	$.fn.twentytwenty = function(options) {
4		var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
5		return this.each(function() {
6			
7			var sliderPct = options.default_offset_pct;
8			var container = $(this);
9			var sliderOrientation = options.orientation;
10			var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
11			var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
12			
13			
14			container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
15			container.append("<div class='twentytwenty-overlay'></div>");
16			var beforeImg = container.find("img:first");
17			var afterImg = container.find("img:last");
18			container.append("<div class='twentytwenty-handle'></div>");
19			var slider = container.find(".twentytwenty-handle");
20			slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
21			slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
22			container.addClass("twentytwenty-container");
23			beforeImg.addClass("twentytwenty-before");
24			afterImg.addClass("twentytwenty-after");
25			
26			var overlay = container.find(".twentytwenty-overlay");
27			overlay.append("<div class='twentytwenty-before-label'></div>");
28			overlay.append("<div class='twentytwenty-after-label'></div>");
29			
30			var calcOffset = function(dimensionPct) {
31				var w = beforeImg.width();
32				var h = beforeImg.height();
33				return {
34					w: w+"px",
35					h: h+"px",
36					cw: (dimensionPct*w)+"px",
37					ch: (dimensionPct*h)+"px"
38				};
39			};
40			
41			var adjustContainer = function(offset) {
42				if (sliderOrientation === 'vertical') {
43					beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
44				}
45				else {
46					beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
47				}
48				container.css("height", offset.h);
49			};
50			
51			var adjustSlider = function(pct) {
52				var offset = calcOffset(pct);
53				slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
54				adjustContainer(offset);
55			}
56			
57			$(window).on("resize.twentytwenty", function(e) {
58				adjustSlider(sliderPct);
59			});
60			
61			var offsetX = 0;
62			var offsetY = 0;
63			var imgWidth = 0;
64			var imgHeight = 0;
65			
66			slider.on("movestart", function(e) {
67				if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
68					e.preventDefault();
69				}
70				else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
71					e.preventDefault();
72				}
73				container.addClass("active");
74				offsetX = container.offset().left;
75				offsetY = container.offset().top;
76				imgWidth = beforeImg.width();
77				imgHeight = beforeImg.height();
78			});
79			
80			slider.on("moveend", function(e) {
81				container.removeClass("active");
82			});
83			
84			slider.on("move", function(e) {
85				if (container.hasClass("active")) {
86					sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
87					if (sliderPct < 0) {
88						sliderPct = 0;
89					}
90					if (sliderPct > 1) {
91						sliderPct = 1;
92					}
93					adjustSlider(sliderPct);
94				}
95			});
96			
97			container.find("img").on("mousedown", function(event) {
98				event.preventDefault();
99			});
100			
101			$(window).trigger("resize.twentytwenty");
102		});
103	};
104	
105})(jQuery);