https://zamek-steknik.cz/cache-buster-1698399558/static/js/lib/jquery.twentytwenty.js

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      // MW new
31      if( beforeImg.attr('alt') ) {
32        container.append("<div class='twentytwenty-before-headline'>"+ beforeImg.attr('alt') +"</div>");
33      }
34      if( afterImg.attr('alt') ) {
35        container.append("<div class='twentytwenty-after-headline'>"+ afterImg.attr('alt') +"</div>");
36      }
37
38      var calcOffset = function(dimensionPct) {
39        var w = beforeImg.width();
40        var h = beforeImg.height();
41        return {
42          w: w+"px",
43          h: h+"px",
44          cw: (dimensionPct*w)+"px",
45          ch: (dimensionPct*h)+"px"
46        };
47      };
48
49      var adjustContainer = function(offset) {
50      	if (sliderOrientation === 'vertical') {
51      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
52      	}
53      	else {
54          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
55    	}
56        container.css("height", offset.h);
57      };
58
59      var adjustSlider = function(pct) {
60        var offset = calcOffset(pct);
61        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
62        adjustContainer(offset);
63      }
64
65      $(window).on("resize.twentytwenty", function(e) {
66        adjustSlider(sliderPct);
67      });
68
69      var offsetX = 0;
70      var imgWidth = 0;
71
72      slider.on("movestart", function(e) {
73        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
74          e.preventDefault();
75        }
76        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
77          e.preventDefault();
78        }
79        container.addClass("active");
80        offsetX = container.offset().left;
81        offsetY = container.offset().top;
82        imgWidth = beforeImg.width();
83        imgHeight = beforeImg.height();
84      });
85
86      slider.on("moveend", function(e) {
87        container.removeClass("active");
88      });
89
90      slider.on("move", function(e) {
91        if (container.hasClass("active")) {
92          sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
93          if (sliderPct < 0) {
94            sliderPct = 0;
95          }
96          if (sliderPct > 1) {
97            sliderPct = 1;
98          }
99          adjustSlider(sliderPct);
100        }
101      });
102
103      container.find("img").on("mousedown", function(event) {
104        event.preventDefault();
105      });
106
107      $(window).trigger("resize.twentytwenty");
108    });
109  };
110
111})(jQuery);