https://lambdalegal.org/wp-content/themes/mosaic-sections-theme/js/jquery.image.comparison.slider.js?ver=2.2.5

1jQuery( document ).ready( function ( $ ) {
2  var dragging                  = false,
3      scrolling                 = false,
4      resizing                  = false;
5  //cache jQuery objects
6  var imageComparisonContainers = $( '.cd-image-container' );
7  //check if the .cd-image-container is in the viewport
8  //if yes, animate it
9  checkPosition( imageComparisonContainers );
10  $( window ).on( 'scroll', function () {
11    if ( !scrolling ) {
12      scrolling = true;
13      ( !window.requestAnimationFrame )
14        ? setTimeout( function () {
15        checkPosition( imageComparisonContainers );
16      }, 100 )
17        : requestAnimationFrame( function () {
18        checkPosition( imageComparisonContainers );
19      } );
20    }
21  } );
22
23  //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
24  imageComparisonContainers.each( function () {
25    var actual = $( this );
26    drags( actual.find( '.cd-handle' ), actual.find( '.cd-resize-img' ), actual, actual.find( '.cd-image-label[data-type="original"]' ), actual.find( '.cd-image-label[data-type="modified"]' ) );
27  } );
28
29  //upadate images label visibility
30  $( window ).on( 'resize', function () {
31    if ( !resizing ) {
32      resizing = true;
33      ( !window.requestAnimationFrame )
34        ? setTimeout( function () {
35        checkLabel( imageComparisonContainers );
36      }, 100 )
37        : requestAnimationFrame( function () {
38        checkLabel( imageComparisonContainers );
39      } );
40    }
41  } );
42
43  function checkPosition( container ) {
44    container.each( function () {
45      var actualContainer = $( this );
46      //console.log( actualContainer.offset().top );
47      //console.log( $( window ).scrollTop() + $( window ).height() * .6 );
48      if ( $( window ).scrollTop() + $( window ).height() * 0.6 > actualContainer.offset().top ) {
49        actualContainer.addClass( 'is-visible' );
50      }
51    } );
52
53    scrolling = false;
54  }
55
56  function checkLabel( container ) {
57    container.each( function () {
58      var actual = $( this );
59      updateLabel( actual.find( '.cd-image-label[data-type="modified"]' ), actual.find( '.cd-resize-img' ), 'left' );
60      updateLabel( actual.find( '.cd-image-label[data-type="original"]' ), actual.find( '.cd-resize-img' ), 'right' );
61    } );
62
63    resizing = false;
64  }
65
66  //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
67  function drags( dragElement, resizeElement, container, labelContainer, labelResizeElement ) {
68    dragElement.on( "mousedown vmousedown", function ( e ) {
69      dragElement.addClass( 'draggable' );
70      resizeElement.addClass( 'resizable' );
71
72      var dragWidth       = dragElement.outerWidth(),
73          xPosition       = dragElement.offset().left + dragWidth - e.pageX,
74          containerOffset = container.offset().left,
75          containerWidth  = container.outerWidth(),
76          //minLeft         = containerOffset + 10,
77          minLeft         = 0,
78          maxLeft         = containerOffset + containerWidth - dragWidth - 10;
79
80      dragElement.parents().on( "mousemove vmousemove", function ( e ) {
81        if ( !dragging ) {
82          dragging = true;
83          ( !window.requestAnimationFrame )
84            ? setTimeout( function () {
85            animateDraggedHandle( e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement );
86          }, 100 )
87            : requestAnimationFrame( function () {
88            animateDraggedHandle( e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement );
89          } );
90        }
91      } ).on( "mouseup vmouseup", function ( e ) {
92        dragElement.removeClass( 'draggable' );
93        resizeElement.removeClass( 'resizable' );
94      } );
95      e.preventDefault();
96    } ).on( "mouseup vmouseup", function ( e ) {
97      dragElement.removeClass( 'draggable' );
98      resizeElement.removeClass( 'resizable' );
99    } );
100  }
101
102  function animateDraggedHandle( e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement ) {
103    var leftValue = e.pageX + xPosition - dragWidth;
104    //constrain the draggable element to move inside his container
105    if ( leftValue < minLeft ) {
106      leftValue = minLeft;
107    } else if ( leftValue > maxLeft ) {
108      leftValue = maxLeft;
109    }
110
111    var width      = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth;
112    var widthValue = width + '%';
113
114    if ( 0 >= width ) {
115      widthValue = 1 + '%';
116    }
117
118    $( '.draggable' ).css( 'left', widthValue ).on( "mouseup vmouseup", function () {
119      $( this ).removeClass( 'draggable' );
120      resizeElement.removeClass( 'resizable' );
121    } );
122
123    $( '.resizable' ).css( 'width', widthValue );
124
125    updateLabel( labelResizeElement, resizeElement, 'left' );
126    updateLabel( labelContainer, resizeElement, 'right' );
127    dragging = false;

128  }
129
130  function updateLabel( label, resizeElement, position ) {
131    if ( position == 'left' ) {
132      ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass( 'is-hidden' ) : label.addClass( 'is-hidden' );
133    } else {
134      ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass( 'is-hidden' ) : label.addClass( 'is-hidden' );
135    }
136  }
137} );