How To

Cara Membuat Image Comparison(Slider Perbandingan Gambar)

Di bawah ini kita akan mempelajari cara membuat slider yang dapat membandingkan dua gambar dengan menggnakan CSS dan Javascript.

Image Comparison(Slider Perbandingan Gambar)

Pindahkan penggeser yang ada di tengah untuk membandingkan gambar:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 200px; /*tingginya harus sama dengan gambar*/}

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

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

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*mengatur tampilan slider:*/  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}
</style>
<script>
function initComparisons() {
  var x, i;
  /*temukan semua elemen dengan kelas "overlay":*/  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*sekali untuk setiap elemen "overlay" teruskan elemen "overlay" sebagai parameter saat menjalankan fungsi compareImages:*/    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*dapatkan lebar dan tinggi elemen img*/    w = img.offsetWidth;
    h = img.offsetHeight;
    /*atur lebar elemen img menjadi 50%:*/    img.style.width = (w / 2) + "px";
    /*buat slider:*/    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*masukkan slider*/    img.parentElement.insertBefore(slider, img);
    /*posisikan slider di tengah:*/    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /*menjalankan fungsi saat tombol mouse ditekan:*/    slider.addEventListener("mousedown", slideReady);
    /*dan fungsi lain saat tombol mouse dilepas:*/    window.addEventListener("mouseup", slideFinish);
    /*atau disentuh (untuk layar sentuh:*/    slider.addEventListener("touchstart", slideReady);
    /*dan dirilis (untuk layar sentuh:*/    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/      e.preventDefault();
      /*slider sekarang diklik dan siap untuk bergerak:*/      clicked = 1;
      /*menjalankan fungsi saat slider digerakkan:*/      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /*slider tidak lagi diklik:*/      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /*jika slider tidak lagi diklik, keluar dari fungsi ini:*/      if (clicked == 0) return false;
      /*dapatkan posisi x kursor:*/      pos = getCursorPos(e)
      /*mencegah penggeser agar tidak berada di luar gambar:*/      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /*eksekusi fungsi yang akan mengubah ukuran gambar overlay sesuai dengan kursor:*/      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      /*dapatkan posisi x dari gambar:*/      a = img.getBoundingClientRect();
      /*hitung koordinat x kursor, relatif terhadap gambar:*/      x = e.pageX - a.left;
      /*pertimbangkan scrolling halaman apa pun:*/      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /*ubah ukuran gambar:*/      img.style.width = x + "px";
      /*posisikan slider:*/      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}
</script>
</head>
<body>

<h1> Bandingkan Dua Gambar </h1>

<p> Klik dan geser penggeser biru untuk membandingkan dua gambar: </p>

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" width="300" height="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" width="300" height="200">
  </div>
</div>

<script>
/*Jalankan fungsi yang akan menjalankan fungsi perbandingan gambar untuk setiap elemen dengan kelas img-comp-overlay:*/initComparisons();
</script>

</body>
</html>

Buat Image Comparison(Slider Perbandingan Gambar)

Langkah 1) Tambahkan HTML:
Contoh

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" width="300" height="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" width="300" height="200">
  </div>
</div>

Langkah 2) Tambahkan CSS:
Container harus memiliki pemosisian “relatif”.
Contoh

* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 200px; /*tingginya harus sama dengan gambar*/}

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

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

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*mengatur tampilan slider:*/  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}

Langkah 3) Tambahkan JavaScript:
Contoh

function initComparisons() {
  var x, i;
  /*temukan semua elemen dengan kelas "overlay":*/  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*sekali untuk setiap elemen "overlay" teruskan elemen "overlay" sebagai parameter saat menjalankan fungsi compareImages:*/    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*dapatkan lebar dan tinggi elemen img*/    w = img.offsetWidth;
    h = img.offsetHeight;
    /*atur lebar elemen img menjadi 50%:*/    img.style.width = (w / 2) + "px";
    /*buat slider:*/    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*masukkan slider*/    img.parentElement.insertBefore(slider, img);
    /*posisikan slider di tengah:*/    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /*menjalankan fungsi saat tombol mouse ditekan:*/    slider.addEventListener("mousedown", slideReady);
    /*dan fungsi lain saat tombol mouse dilepas:*/    window.addEventListener("mouseup", slideFinish);
    /*atau disentuh (untuk layar sentuh:*/    slider.addEventListener("touchstart", slideReady);
    /*dan dirilis (untuk layar sentuh:*/    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/      e.preventDefault();
      /*slider sekarang diklik dan siap untuk bergerak:*/      clicked = 1;
      /*menjalankan fungsi saat slider digerakkan:*/      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /*slider tidak lagi diklik:*/      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /*jika slider tidak lagi diklik, keluar dari fungsi ini:*/      if (clicked == 0) return false;
      /*dapatkan posisi x kursor:*/      pos = getCursorPos(e)
      /*mencegah penggeser agar tidak berada di luar gambar:*/      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /*eksekusi fungsi yang akan mengubah ukuran gambar overlay sesuai dengan kursor:*/      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      /*dapatkan posisi x dari gambar:*/      a = img.getBoundingClientRect();
      /*hitung koordinat x kursor, relatif terhadap gambar:*/      x = e.pageX - a.left;
      /*pertimbangkan scrolling halaman apa pun:*/      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /*ubah ukuran gambar:*/      img.style.width = x + "px";
      /*posisikan slider:*/      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

Langkah 4) Jalankan Script:
Contoh

<script>
/*Jalankan fungsi yang akan menjalankan fungsi perbandingan gambar untuk setiap elemen dengan kelas img-comp-overlay:*/initComparisons();
</script>

Hanifah Nurbaeti

Share
Tags: How Tohtml dan css