https://indiaalliance.org/assets/js/jquery.twentytwenty.js

1(function($){
2  $.fn.twentytwenty = function(options) {
3    var options = $.extend({
4      default_offset_pct: 0.5,
5      orientation: 'horizontal',
6      before_label: 'Before',
7      after_label: 'After',
8      no_overlay: false,
9      move_slider_on_hover: false,
10      move_with_handle_only: true,
11      click_to_move: false
12    }, options);
13    return this.each(function() {
14      var sliderPct = options.default_offset_pct;
15      var container = $(this);
16      var sliderOrientation = options.orientation;
17      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
18      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
19      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
20      if(!options.no_overlay) {
21        container.append("<div class='twentytwenty-overlay'></div>");
22        var overlay = container.find(".twentytwenty-overlay");
23        overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
24        overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
25      }
26      var beforeImg = container.find("img:first");
27      var afterImg = container.find("img:last");
28      container.append("<div class='twentytwenty-handle'></div>");
29      var slider = container.find(".twentytwenty-handle");
30      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
31      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
32      container.addClass("twentytwenty-container");
33      beforeImg.addClass("twentytwenty-before");
34      afterImg.addClass("twentytwenty-after");
35      var calcOffset = function(dimensionPct) {
36        var w = beforeImg.width();
37        var h = beforeImg.height();
38        return {
39          w: w+"px",
40          h: h+"px",
41          cw: (dimensionPct*w)+"px",
42          ch: (dimensionPct*h)+"px"
43        };
44      };
45      var adjustContainer = function(offset) {
46      	if (sliderOrientation === 'vertical') {
47          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
48          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
49      	}
50      	else {
51          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
52          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
53    	}
54        container.css("height", offset.h);
55      };
56      var adjustSlider = function(pct) {
57        var offset = calcOffset(pct);
58        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
59        adjustContainer(offset);
60      };
61      // Return the number specified or the min/max number if it outside the range given.
62      var minMaxNumber = function(num, min, max) {
63        return Math.max(min, Math.min(max, num));
64      };
65      // Calculate the slider percentage based on the position.
66      var getSliderPercentage = function(positionX, positionY) {
67        var sliderPercentage = (sliderOrientation === 'vertical') ?
68          (positionY-offsetY)/imgHeight :
69          (positionX-offsetX)/imgWidth;
70        return minMaxNumber(sliderPercentage, 0, 1);
71      };
72      $(window).on("resize.twentytwenty", function(e) {
73        adjustSlider(sliderPct);
74      });
75      var offsetX = 0;
76      var offsetY = 0;
77      var imgWidth = 0;
78      var imgHeight = 0;
79      var onMoveStart = function(e) {
80        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
81          e.preventDefault();
82        }
83        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
84          e.preventDefault();
85        }
86        container.addClass("active");
87        offsetX = container.offset().left;
88        offsetY = container.offset().top;
89        imgWidth = beforeImg.width(); 
90        imgHeight = beforeImg.height();          
91      };
92      var onMove = function(e) {
93        if (container.hasClass("active")) {
94          sliderPct = getSliderPercentage(e.pageX, e.pageY);
95          adjustSlider(sliderPct);
96        }
97      };
98      var onMoveEnd = function() {
99          container.removeClass("active");
100      };
101      var moveTarget = options.move_with_handle_only ? slider : container;
102      moveTarget.on("movestart",onMoveStart);
103      moveTarget.on("move",onMove);
104      moveTarget.on("moveend",onMoveEnd);
105      if (options.move_slider_on_hover) {
106        container.on("mouseenter", onMoveStart);
107        container.on("mousemove", onMove);
108        container.on("mouseleave", onMoveEnd);
109      }
110      slider.on("touchmove", function(e) {
111        e.preventDefault();
112      });
113      container.find("img").on("mousedown", function(event) {
114        event.preventDefault();
115      });
116      if (options.click_to_move) {
117        container.on('click', function(e) {
118          offsetX = container.offset().left;
119          offsetY = container.offset().top;
120          imgWidth = beforeImg.width();
121          imgHeight = beforeImg.height();
122          sliderPct = getSliderPercentage(e.pageX, e.pageY);
123          adjustSlider(sliderPct);
124        });
125      }
126      $(window).trigger("resize.twentytwenty");
127    });
128  };
129})(jQuery);