https://www.journalreview.com/js/jquery.twentytwenty.js

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