https://psb1.pro/manager/templates/default/js/jquery.twentytwenty.js

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

125  };
126
127})(jQuery);