We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    When you check image zoom functionality in the product page, normally it should work with the entire section.

    Well, let’s talk about what to do when the magnifier on an image works fine in some places, but it will get disappear from a corner before you leaves the cursor out.

    For that we need to change in a magnifier library file like below,

    For that we need to change in a magnifier library file like below,

    You have to change in lib/web/magnifier/magnifier.js file:

    Add below code after line:556

            /**
    	 * Hide magnifier when mouse exceeds image bounds.
    	 */
    	function onMouseLeave() {
    	    onThumbLeave();
    	    isOverThumb = false;
    	    $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
    	}

    Another change is some code needs to be removed and add around line:575

    Remove Code:

    if (inBounds && isOverThumb) {
        if(gMode === 'outside'){
            $magnifierPreview.removeClass(MagnifyCls.magnifyHidden);
        }

    Add Code:

    if (inBounds && isOverThumb && gMode === 'outside') {
                    $magnifierPreview.removeClass(MagnifyCls.magnifyHidden);

    Also remove:

          } else {
            onThumbLeave();
            isOverThumb = false;
            $magnifierPreview.addClass(MagnifyCls.magnifyHidden);

    Now the last change of this file is:

    Add below line after $box.on(‘mousemove’, onMousemove) code:

    $box.on('mouseleave', onMouseLeave);

    After all changes are applied, please run below commands and check.

    php bin/magento cache:flush
    php bin/magento setup:di:compile

     

    field_5bfb909c5ccae

      Get a Free Quote