Source Code Button Memperbesar dan Memperkecil Ukuran Gambar

Perkenalan

Halo Semuanya, Berjumpa Lagi dengan Saya Seonxnn, di Postingan Kali ini saya akan membagikan Source Code Button Memperbesar dan Memperkecil Ukuran Gambar. Seperti biasa, kalian bisa mengembangkan Kode ini Sesuai Keinginkan Kalian.

Seperti Biasa Tanpa basa basi langsung saja kita ke Prakteknya, Untuk Cara Memasang Script kalian Bisa liat disini.

Untuk Demo Kalian Bisa Cek Link DIbawah

Live Demo

Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.

Source Code

 <div class="image-container">
        <img id="myImage" src="https://cdn.seonxnn.id/files/Button%20Perbesar_Perkecil.png" alt="Gambar Anda">
        <div class="button-container">
            <button id="zoomIn">Perbesar</button>
            <button id="zoomOut">Perkecil</button>
        </div>
        <div class="progress-container">
            Ukuran Gambar: <span id="progress">100%</span>
        </div>
    </div>

    <style>
        .image-container {
            text-align: center;
            margin: 20px;
        }

        .image-container img {
            max-width: 100%;
            height: auto;
        }

        .button-container {
            margin-top: 10px;
        }

        .button-container button {
            margin: 0 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .progress-container {
            margin-top: 10px;
            font-size: 16px;
            font-weight: bold;
        }
    </style>

 <script>
        document.addEventListener('DOMContentLoaded', function() {
            const image = document.getElementById('myImage');
            const zoomInButton = document.getElementById('zoomIn');
            const zoomOutButton = document.getElementById('zoomOut');
            const progressElement = document.getElementById('progress');

            let scale = 1;
            const zoomFactor = 0.1;

            function updateProgress() {
                const progressPercentage = Math.round(scale * 100);
                progressElement.textContent = `${progressPercentage}%`;
            }

            zoomInButton.addEventListener('click', function() {
                scale += zoomFactor;
                image.style.transform = `scale(${scale})`;
                updateProgress();
            });

            zoomOutButton.addEventListener('click', function() {
                if (scale > zoomFactor) {
                    scale -= zoomFactor;
                    image.style.transform = `scale(${scale})`;
                    updateProgress();
                }
            });

            // Initialize progress
            updateProgress();
        });
    </script>

Kesimpulan

Diatas adalah Source Code Button Memperbesar dan Memperkecil Ukuran Gambar., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p