Resize Height IMG on Wheelzoom.js

Question

I'm trying to make a zoomable image on a modal and I'm using wheelzoom.js

It's almost perfect, but I need to resize the image Height that is auto, by default, when the orientation of the img is Horizontal. And resize the width when its vertical!

Also, the zoom must work with pinch move.

Here's my project on a freehost

My demo.html:





    
    Wheelzoom

And my Wheelzoom.js:

window.wheelzoom = (function () {
    var defaults = {
        zoom: 0.20,
        maxZoom: 5,
        initialZoom: 1,
        initialX: 0.5,
        initialY: 0.5,
    };

    var main = function (img, options) {
        if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }

        var settings = {};
        var width;
        var height;
        var bgWidth;
        var bgHeight;
        var bgPosX;
        var bgPosY;
        var previousEvent;
        var transparentSpaceFiller;

        function setSrcToBackground(img) {
            img.style.backgroundRepeat = 'no-repeat';
            img.style.backgroundImage = 'url("' + img.src + '")';
            transparentSpaceFiller = 'data:image/svg+xml;base64,' + window.btoa('');
            img.src = transparentSpaceFiller;
        }

        function updateBgStyle() {
            if (bgPosX > 0) {
                bgPosX = 0;
            } else if (bgPosX < width - bgWidth) {
                bgPosX = width - bgWidth;
            }

            if (bgPosY > 0) {
                bgPosY = 0;
            } else if (bgPosY < height - bgHeight) {
                bgPosY = height - bgHeight;
            }

            img.style.backgroundSize = bgWidth + 'px ' + bgHeight + 'px';
            img.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px';
        }

        function reset() {
            bgWidth = width;
            bgHeight = height;
            bgPosX = bgPosY = 0;
            updateBgStyle();
        }

        function onwheel(e) {
            var deltaY = e.deltaY ? e.deltaY : -e.wheelDelta;
            e.preventDefault();

            var rect = img.getBoundingClientRect();
            var offsetX = e.pageX - rect.left - window.pageXOffset;
            var offsetY = e.pageY - rect.top - window.pageYOffset;

            var bgCursorX = offsetX - bgPosX;
            var bgCursorY = offsetY - bgPosY;

            var bgRatioX = bgCursorX / bgWidth;
            var bgRatioY = bgCursorY / bgHeight;

            if (deltaY < 0) {
                bgWidth += bgWidth * settings.zoom;
                bgHeight += bgHeight * settings.zoom;
                img.style.cursor = 'move';
            } else {
                bgWidth -= bgWidth * settings.zoom;
                bgHeight -= bgHeight * settings.zoom;
                img.style.cursor = 'default';
            }

            if (settings.maxZoom) {
                bgWidth = Math.min(width * settings.maxZoom, bgWidth);
                bgHeight = Math.min(height * settings.maxZoom, bgHeight);
            }

            bgPosX = offsetX - (bgWidth * bgRatioX);
            bgPosY = offsetY - (bgHeight * bgRatioY);

            if (bgWidth <= width || bgHeight <= height) {
                reset();
            } else {
                updateBgStyle();
            }
        }




        function drag(e) {
            e.preventDefault();
            bgPosX += (e.pageX - previousEvent.pageX);
            bgPosY += (e.pageY - previousEvent.pageY);
            previousEvent = e;
            updateBgStyle();
        }

        function removeDrag() {
            document.removeEventListener('mouseup', removeDrag);
            document.removeEventListener('mousemove', drag);
        }

        function draggable(e) {
            e.preventDefault();
            previousEvent = e;
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', removeDrag);
        }

        function load() {
            var initial = Math.max(settings.initialZoom, 1);
            if (img.src === transparentSpaceFiller) return;

            var computedStyle = window.getComputedStyle(img, null);
            width = parseInt(computedStyle.width, 10);
            height = parseInt(computedStyle.height, 10);
            bgWidth = width * initial;
            bgHeight = height * initial;
            bgPosX = -(bgWidth - width) * settings.initialX;
            bgPosY = -(bgHeight - height) * settings.initialY;

            setSrcToBackground(img);

            img.style.backgroundSize = bgWidth + 'px ' + bgHeight + 'px';
            img.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px';
            img.addEventListener('wheelzoom.reset', reset);
            img.addEventListener('wheel', onwheel, { passive: false });
            img.addEventListener('mousedown', draggable);
        }

        function touchStart(e) {
            e.preventDefault();
            previousEvent = e.touches[0];
            document.addEventListener('touchmove', touchMove);
            document.addEventListener('touchend', touchEnd);
        }

        function touchMove(e) {
            e.preventDefault();
            bgPosX += (e.touches[0].pageX - previousEvent.pageX);
            bgPosY += (e.touches[0].pageY - previousEvent.pageY);
            previousEvent = e.touches[0];
            updateBgStyle();
        }

        function touchEnd() {
            document.removeEventListener('touchmove', touchMove);
            document.removeEventListener('touchend', touchEnd);
        }

        var destroy = function (originalProperties) {
            img.removeEventListener('wheelzoom.destroy', destroy);
            img.removeEventListener('wheelzoom.reset', reset);
            img.removeEventListener('load', load);
            img.removeEventListener('mouseup', removeDrag);
            img.removeEventListener('mousemove', drag);
            img.removeEventListener('mousedown', draggable);
            img.removeEventListener('wheel', onwheel);
            img.removeEventListener('touchstart', touchStart);
            img.removeEventListener('touchmove', touchMove);
            img.removeEventListener('touchend', touchEnd);

            img.style.backgroundImage = originalProperties.backgroundImage;
            img.style.backgroundRepeat = originalProperties.backgroundRepeat;
            img.src = originalProperties.src;
        }.bind(null, {
            backgroundImage: img.style.backgroundImage,
            backgroundRepeat: img.style.backgroundRepeat,
            src: img.src
        });

        img.addEventListener('wheelzoom.destroy', destroy);

        options = options || {};
        Object.keys(defaults).forEach(function (key) {
            settings[key] = options[key] !== undefined ? options[key] : defaults[key];
        });

        if (img.complete) {
            load();
        }

        img.addEventListener('load', load);
        img.addEventListener('touchstart', touchStart, { passive: false });
    };

    if (typeof window.btoa !== 'function') {
        return function (elements) {
            return elements;
        };
    } else {
        return function (elements, options) {
            if (elements && elements.length) {
                Array.prototype.forEach.call(elements, function (node) {
                    main(node, options);
                });
            } else if (elements && elements.nodeName) {
                main(elements, options);
            }
            return elements;
        };
    }
}());

Resize Height IMG on Wheelzoom.js

Answers (0)

Related Questions