Responsive

[psweeting1]

I've notice it's only responsive if the preview container goes a certain width off the screen and then it'll position the the zoom inside the zoom container. How do I manually change the types of zoom at different screen sizes so I can decide which type of responsive zoom design I wish to use?

[payalord]

Ok, now let assume per different screen size you have different layout for responsive output of your design. Right now there is no native options available to set this quickly. But to achieve this manual control per screen size of setting the type of zoom, we can try next JS code with xZoom API:

(function ($) {
    $(document).ready(function() {
        function manual_responsive(xzoom) {
            var width = $(window).width();
            if (width < 500) {
                xzoom.options.position = "fullscreen"
            } else if (width < 700) {
                xzoom.options.position = "bottom"
            } else if(width < 960) {
                xzoom.options.position = "left"
            } else {
                xzoom.options.position = "right"
            }
        }

        var instance = $('.xzoom, .xzoom-gallery').xzoom({adaptive: false});

        manual_responsive(instance);
        $(window).resize(function() {
            manual_responsive(instance);
        });
    });
})(jQuery);

Here, I have created new function manual_responsive in which I used if condition scheme per every width I need, to have a manual control on it. Make sure the order of width is in ascendant order. And the last one of them is default.

P.S. Make sure that adaptive option is set to false, when you taking manual control over responsive like this one.

[psweeting1]

Outstanding, thank you very much for your time and help, your plugin is amazing. This works and has fixed my problem, I would of never worked that out.

(function ($) {
    $(document).ready(function() {
        function manual_responsive(xzoom) {
            var width = $(window).width();
            if (width < 992) {
                xzoom.options.position = "inside"
            } else if(width < 1200) {
                xzoom.options.position = "right";
                xzoom.options.Xoffset = 5;
                xzoom.options.zoomWidth = 655;
                xzoom.options.zoomHeight = 420;
            } else {
                xzoom.options.position = "right";
                xzoom.options.Xoffset = 100;
                xzoom.options.zoomWidth = 667;
                xzoom.options.zoomHeight = 410;
            }
        }

        var instance = $('#main_image, .xzoom-gallery').xzoom({
            tint: '#333',
            adaptive: false,
            smoothZoomMove: 0,
            smoothLensMove: 0,
            smoothScale: 0,
            hover: true,
            defaultScale: 0
        });

        manual_responsive(instance);
        $(window).resize(function() {
            manual_responsive(instance);
        });
    });
})(jQuery);

This is my code, I know I could of simplify the syntax for xzoom.options to an $.extend but for easy reading for anyone else new to jQuery, I hope this helps.

[psweeting1]

If xZoom is not being used on a webpage it crashes my other Javascript and jQuery that I'm using.

Uncaught TypeError: Cannot set property 'position' of undefined

This error always appears. I'm still using the same script from my previous comment.

[psweeting1]

Sorry I fixed it, I wrapped it in an if statement.

if($('#main_image').length === 1) {
//run the script
}

[payalord]

No problem, thanks for sharing your solution 👍