Twenty Twenty jQuery Plugin to Compare Images

TwentyTwenty jQuery plugin is a clean and easy-to-use that allows you to compare and shows the differences between two images side by side.

Following are the examples of Twenty Twenty jQuery Plugin to Compare Images.

Example 1:

<!doctype html>
<html>
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport"
          content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content="ie=edge">
    <title> Twenty Twenty jQuery Plugin to Compare Images </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

		<figure class = "cd-image-container">
		<img src = "https://source.unsplash.com/KbR06h9dNQw/768x460" alt = "Original Image">
		<span class = "cd-image-label" data-type = "original"> Crowded </span>

		<div class = "cd-resize-img">
			<img src = "https://source.unsplash.com/jFCViYFYcus/768x460" alt = "Modified Image">
			<span class = "cd-image-label" data-type = "modified"> Quiet </span>
		</div>

		<span class = "cd-handle"> </span>
</figure>
<header>
  <h1> Image Comparison Slider </h1>
</header>
<footer> <p>Based on: <a href = "https://codepen.io/TheBeardedGuru/pen/XMZJJQ">Charles Robinson's pen</a></p></footer>
<style>
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 100%;
  font-family: "Roboto Slab", sans-serif;
  color: #445b7c;
  background-color: #363636;
  padding: 1rem .5rem;
}
a {
  color: #dc717d;
  text-decoration: none;
}
img {
  max-width: 100%;
}

header {
  position: relative;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
header h1 {
  font-size: 22px;
  font-size: 1.375rem;
  color: #ffffff;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  header {
    height: 6em;
    line-height: 1.6;
  }
  header h1 {
    font-size: 32px;
    font-size: 2rem;
  }
}
.cd-image-container {
  position: relative;
  width: 90%;
  max-width: 768px;
  margin: 0em auto;
}
.cd-image-container img {
  display: block;
}
.cd-image-label {
  position: absolute;
  font-weight: 500;
  letter-spacing: 1px;
  top: 0;
  right: 0;
  color: #ffffff;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
.is-visible .cd-resize-img {
  width: 50%;
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}
@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
    left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
    background-color: #445b7c;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
footer {
  padding: 2rem;
}
footer p {
  font-size: 90%;
  font-weight: 300;
  text-align: center;
}
</style>
<body>
		<figure class = "cd-image-container">
		<img src = "https://source.unsplash.com/KbR06h9dNQw/768x460" alt = "Original Image">
		<span class = "cd-image-label" data-type = "original"> Crowded </span>

		<div class = "cd-resize-img"> <!-- the resizable image on top -->
			<img src = "https://source.unsplash.com/jFCViYFYcus/768x460" alt = "Modified Image">
			<span class = "cd-image-label" data-type= "modified"> Quiet </span>
		</div>

		<span class = "cd-handle"> </span>
</figure>
<script>
jQuery(document).ready(function($){
    var dragging = false,
        scrolling = false,
        resizing = false;
        var imageComparisonContainers = $('.cd-image-container');
    checkPosition(imageComparisonContainers);
    $(window).on('scroll', function(){
        if( !scrolling) {
            scrolling =  true;
            ( !window.requestAnimationFrame )
                ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)
                : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});
        }
    });
        imageComparisonContainers.each(function(){
        var actual = $(this);
        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"]'));
    });
    $(window).on('resize', function(){
        if( !resizing) {
            resizing =  true;
            ( !window.requestAnimationFrame )
                ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100): requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});
        }
    });
    function checkPosition(container) {
        container.each(function(){
            var actualContainer = $(this);
            if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
                actualContainer.addClass('is-visible');
            }
        });
        scrolling = false;
    }
    function checkLabel(container) {
        container.each(function(){
            var actual = $(this);
            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
        });
        resizing = false;
    }
        function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
        dragElement.on("mousedown vmousedown", function(e) {
            dragElement.addClass('draggable');
            resizeElement.addClass('resizable');
            var dragWidth = dragElement.outerWidth(),
                xPosition = dragElement.offset().left + dragWidth - e.pageX,
                containerOffset = container.offset().left,
                containerWidth = container.outerWidth(),
                minLeft = containerOffset + 10,
                maxLeft = containerOffset + containerWidth - dragWidth - 10;
            
            dragElement.parents().on("mousemove vmousemove", function(e) {
                if( !dragging) {
                    dragging =  true;
                    ( !window.requestAnimationFrame )
    ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100) : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});
                }
            }).on("mouseup vmouseup", function(e){
                dragElement.removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            e.preventDefault();
        }).on("mouseup vmouseup", function(e) {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
    }
    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
        var leftValue = e.pageX + xPosition - dragWidth;   
                if(leftValue < minLeft ) {
            leftValue = minLeft;
        } else if ( leftValue > maxLeft) {
            leftValue = maxLeft;
        }
        var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
        $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
            $(this).removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        $('.resizable').css('width', widthValue); 

        updateLabel(labelResizeElement, resizeElement, 'left');
        updateLabel(labelContainer, resizeElement, 'right');
        dragging =  false;
    }
    function updateLabel(label, resizeElement, position) {
        if(position == 'left') {
            ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
        } else {
            ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
        }
    }
});
</script>
</body>
</html>

Explanation:

In the above example, we have created a twentytwenty jquery plugin to compare the images.

Output:

Following is the output of this example.

Twenty Twenty jQuery Plugin to Compare Images

Example 2:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport?  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
h1 {
  font-size: 35px;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 1500px;
  text-align: center;
}
h2 {
  font-size: 30px;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 1500px;
  text-align: center;
}
.img-comp-container {
    position: relative;
    height: auto;
    max-width: 640px;
    width: 100%;
    left:50%;
    transform:translateX(-50%);
    box-shadow: 0px 10px 50px 15px #00000085;
}

.img-comp-responsive {
    height: 0;
    width: 100%;
    padding-bottom: 75%;
}

.img-comp-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.img-comp-img img {
    display: block;
    vertical-align: middle
}

.img-comp-overlay {
    width: 50%;
}
.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
</style>
<body>
<h1> Example </h1>
<h2> Image comparison Slider </h2>
    <div class="img-comp-container">
        <div class="img-comp-slider">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsSAAALEgHS3X78AAAC8klEQVRYw9WZP27iQBSHPyIrVCZbh4akcirTMFUkiHIAnAtkjwBH4AjhCrlAJgeI1rR2k6lwRxq7SpHIFTRssWNEwAab//uTkBAMMx/vzXvz5rk0nU4pKillDWjpVx2wM4Yq4B1wAddxnI+ia5WKAEopW0AXaC9+F4YhUkoAGo0GQoi0KV6BJ8dx3LxrGgXAekCT7dQG2lLKAdDLA2qsAfulwTrsVk3gj5Syr0G/sgaerYFz9wA3rw7g6rXyA0op68DHis2/S9nAh15zPeCc5S44nC6yLHl2AnArIRct2DuQW1e5u5cKqFNJh+Oro1mWLNjjdNT7AaiJmycE2EysmCTq7qYzBUHAcDikUqnMPovjmOfnZyzLwrZtyuXyJlN3Abf08vJSA0abgHmeRxzHAFiWRRAES+/Pz8+xbZubmxtM0yy6zJWhK5JcGo/HKKVQSjGZTHL9ZjKZ4Ps+vu9jWRZCiCKgrVyAcRyjlGI4HOYGy7J6EARcXV1h2zbVajUXYH0VmOd5M3ftSqPRiNFoxOXlJbZtc319nTW0bqQl5jAM8TyPKIr2GqpRFBFFEaZpIoTAsqylxG2kReS+wdI89fb2hud5S5FvpEXksRTHMb7vo5SaRf4ZJy4jyVtJ7jqGixOZppnu4kQJ6KGCZB4sI0gw9NXwRyRXq1UeHh72lmYS5UgzytD3Vjvrn93f3yOE2Eminp1f+RP1u6Er6N/rXHB7e0uj0Sh81C1uoYJHnZsA5lK5XEYIgRAid2raslhwS9PpFPmvJdDettyar2bCMNy23Hp1HMdJovhpU8D5yE8ATdPk8fFx2636NKuodQticEL5eZC0Rf6PO8mcFfsnANefbyql3YvVEeFU5r1YW/FLV9jfR4D7BlqLna6lauZIkKlwmd0tx3HegdqB3K2Aml4zX/ttwZL9PQdEfaMGZgLpOE4XuNtxnhwAd3ru9QXrOumwb61qouc9vijYRC/t6jHEeDzm8/MTgEqlkhQGWz+G+AukJ3rwxh2Q9wAAAABJRU5ErkJggg==" width="40" height="40" style="width:40px;height:40px;max-width:initial;" />
        </div>
        <div class="img-comp-responsive">
            <div class="img-comp-img">
                <img src="https://images.unsplash.com/photo-1531902706636-a9966c06605a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cf8d36da7e1b4717afdd2b9a2569ff53" style="width:auto;height:100%;max-width:initial;" width="640" height="480" />
            </div>
            <div class="img-comp-img img-comp-overlay" id="img-comp-overlay">
                <img src="https://images.unsplash.com/photo-1536054865251-fa7b4b39c264?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2675739fa4b8c231e25377cf9498772" style="width:auto;height:100%;max-width:initial;" width="640" height="480" />
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function maxVal(val, itsmax) {
    if (val <= itsmax && val >= 0) return val
    else if (val <0) return 0
    else return itsmax;
}

jQuery(".img-comp-overlay").each(function () {
    var slider = jQuery(this).parents(".img-comp-container").find(".img-comp-slider");
    var img = jQuery(this).find("img");

    var slidef = function () {
        var e = window.event;
        var x = img.offset().left;
        img.parent().width(maxVal(e.pageX - x, jQuery(".img-comp-img").width()));
        slider.css("left", (maxVal(e.pageX - x, jQuery(".img-comp-img").width())) + "px")
    }

    
    slider.mousedown(function (e) {
        e.preventDefault();
        jQuery(window).on("mousemove.slideev", this, slidef);
    });

    jQuery(window).mouseup(function (e) {
        e.preventDefault();
        jQuery(window).off("mousemove.slideev");
    });

    
    slider.on("touchmove", function (e) {
        e.preventDefault();
        var t = e.touches[0];
        var x = img.offset().left;
        img.parent().width(maxVal(t.pageX - x, jQuery(".img-comp-img").width()));
        slider.css("left", (maxVal(t.pageX - x, jQuery(".img-comp-img").width())) + "px")
    })
});
</script>
</body>
</html>

Explanation:

In the above example, we have created a twentytwenty jquery plugin to compare the images.

Output:

Following is the output of this example.