Restrain image zone for zooming / Activate of click or focus?

[rombat]

Hi, Is there a way to limit a zone of the image to activate zooming? My image is in a bxSlider carousel, and when I zoom, bxSlider previous/next controls are hidden by the zoomed image. Another solution would be to activate elevatezoom on focus or click, even if I would prefer the first one. Thanks in advance.

[pascalcarmoni]

var imageTop; var imageLeft; var imageBottom; var imageRight;

    $(window).mousemove(getMousePosition);

    $(window).load(init);
    $(window).resize(init);

    function getMousePosition(event){

        mouseX = event.pageX;
        mouseY = event.pageY;

        if (mouseX < imageLeft || mouseX > imageRight || mouseY < imageTop || mouseY > imageBottom) {
        $(".zoomLens").hide();
        }
    }

    function init(){

        mouseX = 0;
        mouseY = 0;

        imageLeft = $(".product-gallery").offset().left;
        imageRight = imageLeft + $(".product-gallery").width();
        imageTop = $(".product-gallery").offset().top;
        imageBottom = imageTop + $(".product-gallery").height();

    }

[spupett]

Where would I put this to implement it?

[pascalcarmoni]

into a new .js files

[gangdai]

I think it's should be $(".zoomContainer").hide(); rather than $(".zoomLens").hide();

[gangdai]

add to the above. depends on the context of your gallery / imgs style positions it might be more accurate to use something like:

    imageLeft = $("#product-image-gallery img:visible").offset().left;
    imageRight = imageLeft + $("#product-image-gallery img:visible").width();
    imageTop = $("#product-image-gallery img:visible").offset().top;
    imageBottom = imageTop + $("#product-image-gallery img:visible").height();

as the imgs might not always be the same as the full lenghts/width of it's parents in some situation. and when bxslider shifts the gallery img invisible the value of the above parent's [offset().left] could be 0 in those cases.