https://gamegpu.com/plugins/content/jux_ba_load_shortcode/assets/js/jquery.jux-before-after.js

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