Image Comparison Display

INFORMATION & CODE

Image Comparison Display

What the Code Does

This code creates an interactive Before/After Image Comparison Slider, allowing users to drag a slider horizontally across the screen to compare two different images (in this case, a morning and evening view of Iceland) stacked on top of one another.

How the Code Works

The HTML structure sets up a wrapper containing a base image and a second overlaid image inside specific classes. The CSS styles these elements, centering them on the page, adding decorative borders and outlines to the container, and defining the circular red slider with a directional arrow icon (⬌). The JavaScript (initComparisons) dynamically injects the interactive slider onto the page, calculates the initial dimensions, and listens for mouse or touch events. When a user clicks and drags the slider, the JavaScript continuously updates the width of the top image overlay and repositions the slider to match the cursor or finger position, creating a smooth revealing effect.

How to Use This Code

To use this code, save the three blocks of code into three separate files in the same directory: name the HTML file index.html, the CSS file styles.css, and the JavaScript file scripts.js. Once saved, simply open the index.html file in any modern web browser. To customize it with your own images, replace the URLs in the <img> tags within the HTML file with the links or local file paths of your choice, ensuring both images share similar dimensions for the best visual comparison.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Image Comparison Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <center>
      <h3 class="centre">Image Comparison</h3>
    </center> 
    <div class="image-comp-wrapper">
      <div class="image-comp-img">
        <img src="https://e-nash.net/photos/evening_Iceland.png" width="480">
      </div>

      <div class="image-comp-img image-comp-overlay">
        <img src="https://e-nash.net/photos/morning_Iceland.png" width="480">
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .image-comp-wrapper {
        position: relative;
        top: 10px;
        left: calc(50% - 260px); 
      }

      .image-comp-img {
        position: absolute;
        width: auto;
        height: auto;
        border: 20px solid #aaaaaa;
        outline: 20px double #ff7000;
        outline-offset: -20px;
        overflow: hidden;
      }

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

      .image-comp-slider {
        position: absolute;
        z-index: 9;
        cursor: pointer;
        /*set the appearance of the slider:*/
        width: 40px;
        height: 40px;
        padding: 2.5px 7.5px 12.5px 7.5px;
        background-color: rgba(255, 0, 0, 0.8);
        border-radius: 50%;
        color: #ffffff;
        font-family: "fontAwesome";
        font-size: 24px;
      }
     
      .image-comp-img.image-comp-overlay {
        position: absolute;
        top: 20px;
        left: 20px;
        width: auto;
        height: auto;
        border: 0;
        outline: 0;
        overflow: hidden;
        
      }

      .centre {
        position: relative;
        top: 0px;
        color: #ff7000;
      }
                  
      center {
        font-size: 22px;
        text-shadow: 2px 1px #ff0000, 3px 2px #ff0000;
      }

JAVASCRIPT


                      function initComparisons() {
        var x, i;
        x = document.getElementsByClassName("image-comp-overlay");
        for (i = 0; i < x.length; i++) {
          compareImages(x[i]);
        }
        function compareImages(img) {
          var slider, img, clicked = 0, w, h;
          wt = img.offsetWidth;
          ht = img.offsetHeight;
          img.style.width = (wt / 2) + "px";
          slider = document.createElement("DIV");
          slider.setAttribute("class", "image-comp-slider");
          img.parentElement.insertBefore(slider, img);
          slider.style.top = (ht / 2) - (slider.offsetHeight / 2) + 20 + "px";
          slider.style.left = (wt / 2) - (slider.offsetWidth / 2) + 20 + "px";
          slider.innerText = "⬌";
          slider.addEventListener("mousedown", slideReady);
          window.addEventListener("mouseup", slideFinish);
          slider.addEventListener("touchstart", slideReady);
          window.addEventListener("touchend", slideFinish);
          function slideReady(e) {
            e.preventDefault();
            clicked = 1;
            window.addEventListener("mousemove", slideMove);
            window.addEventListener("touchmove", slideMove);
          }
          function slideFinish() {
            clicked = 0;
          }
          function slideMove(e) {
            var pos;
            if (clicked == 0) return false;
            pos = getCursorPos(e)
            if (pos < 0) pos = 0;
            if (pos > wt) pos = wt;
            slide(pos);
          }
          function getCursorPos(e) {
            var im, x = 0;
            e = (e.changedTouches) ? e.changedTouches[0] : e;
            im = img.getBoundingClientRect();
            x = e.pageX - im.left;
            x = x - window.pageXOffset;
            return x;
          }
          function slide(x) {
            img.style.width = x + "px";
            slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + 20 + "px";
          }
        }
      }
      initComparisons();

MENU

INFORMATION & CODE