Sering belanja online? Mau buat website eCommerce tapi bingung buat zoom gambar produknya? Mari bahas sekilas tentang kegunaan Zoom Product Image ini.
Ketika si penjual menjual suatu barang, mereka pasti mencantumkan gambar dari barang yang mereka jual. Untuk memastikan barang yang di beli adalah barang yang benar-benar bagus dan berkualitas tinggi, biasanya setiap website eCommerce selalu menyediakan fitur untuk men-Zoom gambar barang yang di jual.
Berikut adalah cara paling mudah untuk menambahkan fitur tersebut di website anda.
Langkah 1 – Tambahkan HTML
<div class="img-zoom-container"> <img id="myimage" src="img_girl.jpg" width="300" height="240" alt="Girl"> <div id="myresult" class="img-zoom-result"></div> </div>
Langkah 2 – Tambahkan CSS
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*tampilkan dengan size*/
width: 300px;
height: 300px;
}Langkah 3 – Tambahkan JavaScript
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/* membuat lensa */
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/* masukkan lensa */
img.parentElement.insertBefore(lens, img);
/* kalkulasi antara lensa dan hasil */
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/* tamplikan gambar di background */
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/* jalankan fungsi ketika mouse di gerakkan */
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/* jalankan fungsi ketika touch screen */
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
lens.style.left = x + "px";
lens.style.top = y + "px";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}Langkah 4 – Pasang script Zoom
<script>
imageZoom("myimage", "myresult");
</script>Berikut adalah hasilnya
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; width: 40px; height: 40px; } .img-zoom-result { border: 1px solid #d4d4d4; width: 300px; height: 300px; } </style> <script> function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementById(imgID); result = document.getElementById(resultID); lens = document.createElement("DIV"); lens.setAttribute("class", "img-zoom-lens"); img.parentElement.insertBefore(lens, img); cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; result.style.backgroundImage = "url('" + img.src + "')"; result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px"; lens.addEventListener("mousemove", moveLens); img.addEventListener("mousemove", moveLens); lens.addEventListener("touchmove", moveLens); img.addEventListener("touchmove", moveLens); function moveLens(e) { var pos, x, y; e.preventDefault(); pos = getCursorPos(e); x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;} if (x < 0) {x = 0;} if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;} if (y < 0) {y = 0;} lens.style.left = x + "px"; lens.style.top = y + "px"; result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; y = e.pageY - a.top; x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Zoom</h1> <p>Gerakkan mouse pada gambar atas</p> <div class="img-zoom-container"> <img id="myimage" src="https://images.unsplash.com/photo-1503602642458-232111445657?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" width="300" height="240"> <div id="myresult" class="img-zoom-result"></div> </div> <script> imageZoom("myimage", "myresult"); </script> </body> </html>
