Photos - zoom-in/zoom-out with mouse wheel

revision: 2024-12-08

CSS - zoom-in/zoom-out

palace
palace
palace
code: 
                <div>
                    <div>
                        <div class="img-hover-zoom zoom_1"><img src="../images/11a.jpg" alt="palace"></div>
                        <div class="img-hover-zoom zoom_2"><img src="../images/12a.jpg" alt="palace"></div>
                        <div class="img-hover-zoom zoom_3"><img src="../images/13a.jpg" alt="palace"></div>
                    </div>
                    <style>
                        .img-hover-zoom { width: 30vw; height: 20vw; overflow: hidden;}
                        .img-hover-zoom img {width: 100%; height: 100%; transition: transform .5s ease;}
                        .zoom_1:hover img {transform: scale(1.5);}
                        .zoom_2:hover img {transform: scale(0.5);}
                        .zoom_3:hover img {transform: scale(1.5); box-shadow: 0.5vw 0.3vw green;}
                    </style>
                </div>

limited zoom-in/zoom-out with mouse wheel


holidays
code: 
                <div class="scrollable">
                    <div id="image-container">
                        <img alt="holidays"src="../images/1.jpg" />
                    </div>    
                </div>
                </div>
                <style>
                    .scrollable{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid blue;margin-left: 10vw;}
                    #image-container {position: absolute; display: block; height: 30vw; width: 30vw; display: block; text-align: center;}
                    #image-container img {position: relative; max-width: 100%; max-height: 100%;}
                    #image-container img:hover {cursor: zoom-in;}
                </style>
                <script>
                    
                        let currentZoom = 1;
                        let minZoom = 0.2;
                        let maxZoom = 1.8;
                        let stepSize = 0.1;

                        let container = document.getElementById("image-container");
                        document.querySelector('.scrollable').addEventListener('wheel', function(event) {
                            event.preventDefault();
                            let direction = event.deltaY > 0 ? -1 : 1;
                            zoomImage(direction);
                        });
                        function zoomImage(direction){
                            event.preventDefault();
                            let newZoom = currentZoom + direction * stepSize;
                            if (newZoom < minZoom || newZoom > maxZoom) {
                                return;
                            }
                            currentZoom = newZoom;
                            let image = document.querySelector("#image-container img");
                            image.style.transform = "scale(" + currentZoom + ")";
                        }
                    
                </script>

unlimited zoom-in with mouse wheel, draggable

holiday
code: 
                <div>
                    <div id="zoom_2">
                        <img class='zoom_A' src='../images/1.jpg' alt='holiday' width='555' height='320'/>
                        <script src="wheelzoom.js"></script> 
                    </div>
                    <style>
                        .zoom_A{width: 40%; height: 40%; margin-left: 20vw; }
                    </style>
                    <script>
                        wheelzoom(document.querySelector('img.zoom_A'));
                    </script>
                </div>

zoom image point with mouse wheel

zoom
code: 
                <div class="frame">
                    <div id="zoom_3">
                        <img src="../images/17.jpg" alt="zoom">
                    </div>
                </div>
                <style>
                    .frame{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid green;margin-left:10vw;}
                    #zoom_3 {width: 100%; height: 100%; transform-origin: 0px 0px;  transform: scale(1) translate(0px, 0px); cursor: grab;}
                    div#zoom_3 > img {width: 100%; height: 100%; }
                </style>
                <script>
                    var scale = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 }, zoom = document.getElementById("zoom_3");
                    function setTransform() {
                        zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
                    }
                    zoom.onmousedown = function (e) {
                        e.preventDefault();
                        start = { x: e.clientX - pointX, y: e.clientY - pointY };
                        panning = true;
                    }
                    zoom.onmouseup = function (e) {
                        e.preventDefault();
                        panning = false;
                    }
                    zoom.onmousemove = function (e) {
                        e.preventDefault();
                        if (!panning) {
                        return;
                        }
                        pointX = (e.clientX - start.x);
                        pointY = (e.clientY - start.y);
                        setTransform();
                    }
                    zoom.onwheel = function (e) {
                        e.preventDefault();
                        var xs = (e.clientX - pointX) / scale, ys = (e.clientY - pointY) / scale, delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
                        (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
                        pointX = e.clientX - xs * scale;
                        pointY = e.clientY - ys * scale;
                        setTransform();
                    }
                </script>