https://www.unl.edu.ar/wp-content/plugins/before_after_slider/asse…/js/jquery.twentytwenty.js?ver=1.0.0

1(function($){
2  'use strict';
3  $.fn.twentytwenty = function(options) {
4    var options = $.extend({
5      default_offset_pct: 0.5,
6      orientation: 'horizontal',
7      before_label: 'Antes',
8      after_label: 'Despues',
9      no_overlay: false,
10      move_slider_on_hover: false,
11      move_with_handle_only: true,
12      click_to_move: false
13    }, options);
14
15    return this.each(function() {
16
17      var sliderPct = options.default_offset_pct;
18      var container = $(this);
19      var sliderOrientation = options.orientation;
20      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
21      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
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
45
46        return {
47          w: w+"px",
48          h: h+"px",
49          cw: (dimensionPct*w)+"px",
50          ch: (dimensionPct*h)+"px"
51        };
52      };
53
54      var adjustContainer = function(offset) {
55        if (sliderOrientation === 'vertical') {
56          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
57          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
58        }
59        else {
60          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
61          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
62        }
63        container.css("height", offset.h);
64      };
65
66      var adjustSliderWidth = function(offset){
67        container.css("max-width", offset.w);
68      }
69
70      var adjustSlider = function(pct) {
71        var offset = calcOffset(pct);
72        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
73        adjustContainer(offset);
74      };
75
76      // Return the number specified or the min/max number if it outside the range given.
77      var minMaxNumber = function(num, min, max) {
78        return Math.max(min, Math.min(max, num));
79      };
80
81      // Calculate the slider percentage based on the position.
82      var getSliderPercentage = function(positionX, positionY) {
83        var sliderPercentage = (sliderOrientation === 'vertical') ?
84          (positionY-offsetY)/imgHeight :
85          (positionX-offsetX)/imgWidth;
86
87        return minMaxNumber(sliderPercentage, 0, 1);
88      };
89
90
91      $(window).on("resize.twentytwenty", function(e) {
92        adjustSlider(sliderPct);
93      });
94
95      jQuery(document).ready(function(){
96        var offset = calcOffset(sliderPct);
97        adjustSliderWidth(offset);
98        setTimeout(function(){
99           adjustSlider(sliderPct);
100        },500);
101      });
102
103      var offsetX = 0;
104      var offsetY = 0;
105      var imgWidth = 0;
106      var imgHeight = 0;
107      var onMoveStart = function(e) {
108        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
109          e.preventDefault();
110        }
111        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
112          e.preventDefault();
113        }
114        container.addClass("active");
115        offsetX = container.offset().left;
116        offsetY = container.offset().top;
117        imgWidth = beforeImg.width(); 
118        imgHeight = beforeImg.height();          
119      };
120      var onMove = function(e) {
121        if (container.hasClass("active")) {
122          sliderPct = getSliderPercentage(e.pageX, e.pageY);
123          adjustSlider(sliderPct);
124          if( e.type == 'mousemove' ){
125            jQuery(this).find('.twentytwenty-overlay').addClass('hover');
126          }
127        }
128      };
129      var onMoveEnd = function(e) {
130        container.removeClass("active");
131        if( e.type == 'mouseleave' ){
132          jQuery(this).find('.twentytwenty-overlay').removeClass('hover');
133        }
134      };
135
136      var moveTarget = options.move_with_handle_only ? slider : container;
137      moveTarget.on("movestart",onMoveStart);
138      moveTarget.on("move",onMove);
139
140      if (options.move_slider_on_hover) {
141        container.on("mouseenter", onMoveStart);
142        container.on("mousemove", onMove);
143        container.on("mouseleave", onMoveEnd);
144      }
145
146      slider.on("touchmove", function(e) {
147        e.preventDefault();
148      });
149
150      container.find("img").on("mousedown", function(event) {
151        event.preventDefault();
152      });
153
154      if (options.click_to_move) {
155        container.on('click', function(e) {
156          offsetX = container.offset().left;
157          offsetY = container.offset().top;
158          imgWidth = beforeImg.width();
159          imgHeight = beforeImg.height();
160
161          sliderPct = getSliderPercentage(e.pageX, e.pageY);
162          adjustSlider(sliderPct);
163        });
164      }
165
166      $(window).trigger("resize.twentytwenty");
167    });
168  };
169
170})(jQuery);