Build a Image Zoom & Magnifier With Live Preview in Browser Using js-image-zoom Library in JS

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/js-image-zoom@0.4.1/js-image-zoom.js" type="application/javascript"></script>
</head>

<body>
    <input type="file" id="imageInput" accept="image/*" />
    <div id="img-container" style="width: 400px; margin-top: 20px;">
        <!-- Image will be displayed here after selection -->
    </div>

    <script>
        // File input event listener
        document.getElementById("imageInput").addEventListener("change", function (event) {
            var imgContainer = document.getElementById("img-container");
            imgContainer.innerHTML = "";  // Clear any previously displayed image

            var file = event.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = document.createElement("img");
                    img.src = e.target.result;  // Set the source to the selected file
                    img.style.width = "100%";  // Set image width to 100% of the container
                    imgContainer.appendChild(img);  // Append the image to the container

                    // Initialize ImageZoom with options
                    var options = {
                        width: 400,
                        zoomWidth: 500,
                        offset: { vertical: 0, horizontal: 10 }
                    };
                    new ImageZoom(imgContainer, options);
                };
                reader.readAsDataURL(file);  // Read the selected file
            }
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</div>

// File input event listener

document.getElementById("imageInput").addEventListener("change", function (event) {

var imgContainer = document.getElementById("img-container");

imgContainer.innerHTML = ""; // Clear any previously displayed image

var file = event.target.files[0];

if (file) {

var reader = new FileReader();

reader.onload = function (e) {

var img = document.createElement("img");

img.src = e.target.result; // Set the source to the selected file

img.style.width = "100%"; // Set image width to 100% of the container

imgContainer.appendChild(img); // Append the image to the container

// Initialize ImageZoom with options

var options = {

width: 400,

zoomWidth: 500,

offset: { vertical: 0, horizontal: 10 }

};

new ImageZoom(imgContainer, options);

};

reader.readAsDataURL(file); // Read the selected file

}

});

</script>

</body>

</html>

Build a Image Zoom & Magnifier With Live Preview in Browser Using js-image-zoom Library in JS

Comments

Leave a Reply Cancel reply

Archives