https://collectieoverijssel.nl/wp-content/plugins/ultimate-lightbox/assets/js/jquery.twentytwenty.js

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