Magento2: Magnifier doesn't work with mode set to inner

[theycallmepepper]

This appears to be the original library that was ported over magnifier.js which offers the option of setting mode to 'inside' for an in-frame zoom.

In the etc/view.xml for the theme if you set the following the zoom does not work as expected:
<var name="magnifier"> <var name="mode">inside</var> <var name="eventType">hover</var> <var name="enabled">true</var> </var>
Instead of an in-frame zoom the lens does not appear. If you change mode back to outside it functions as expected.

Also,
https://github.com/magento/magento2/blob/develop/lib/web/magnifier/magnifier.js#L214 --unreachable if statement.

[guz-anton]

Hi @theycallmepepper
We will do investigation under MAGETWO-55440 internal ticket.

Thanks for pointing to issue.

[minhluan259]

I've enabled magnifier zoom in
vendor\magento\theme-frontend-luma\etc\view.xml
I'm notice it doesn't work on
magento 2.1.2 with sampledata (php 7.0.10, mysql 5.7)

       <var name="magnifier">
            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

[LSERRE]

I also notified this issue. I found a quick fixe for it: just set left to 0 and top to 0 and use default mode.

[artlesshand]

Any updates on this issue?

[lingwooc]

I've patched/replaced a couple of files in this module. The important bits are the css and the js which you could just throw in your theme (here). It also makes the magnifier work on touch screen laptops which it rather naively disables normally.

@LSERRE IIRC you also need a tweak to make sure a click on the now magnified image gives you a "fullscreen" view (assuming you have that enabled). That's in the module above as well.

[artlesshand]

Thanks @lingwooc

[magento-engcom-team]

@theycallmepepper, thank you for your report.
We've created internal ticket(s) MAGETWO-55440 to track progress on the issue.

[lingwooc]

Master branch of https://github.com/lingwooc/overlayMagnify-magento2 is updated to work with 2.2.4 which broke it.

Bit more detail.

The mouse out detection only works if you move slowly so magnifier.js needs:

function onMouseLeave(e) {
    onThumbLeave();
    isOverThumb = false;
    $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
$box.on('mouseleave', onMouseLeave);

This rule fixes the overlay, the new rule is pointer-events.

.magnifier-preview{
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 0px;
    pointer-events: none;
}

I did have a look through to see what had changed and I couldn't see much to cause this. These two changes fix it though. I'll do a 1.1.0 release on that module to packagist at some point.

I'm aware I could do a PR on this but I don't have the time to test it.

[kacperchara]

WroCD

[magento-engcom-team]

@kacperchara thank you for joining. Please accept team invitation here and self-assign the issue.

[magento-engcom-team]

Hi @theycallmepepper. Thank you for your report.
The issue has been fixed in magento/magento2#15382 by @kacperchara in 2.2-develop branch
Related commit(s):

• c427ff12681baf2bb276dd12335a293302ca5310

The fix will be available with the upcoming 2.2.5 release.

[leoquijano]

Hi @magento-engcom-team.

The fix seems to be available in 2.2-develop but not in the 2.2.5 release. The files marked with the 2.2.5 tag weren't changed.

https://github.com/magento/magento2/blob/2.2.5/app/design/frontend/Magento/luma/etc/view.xml
https://github.com/magento/magento2/blob/2.2.5/lib/web/mage/gallery/gallery.less
https://github.com/magento/magento2/blob/2.2.5/lib/web/magnifier/magnifier.js

Maybe in 2.2.6?

[magento-engcom-team]

Hi @theycallmepepper. Thank you for your report.
The issue has been fixed in magento/magento2#17052 by @torhoehn in 2.3-develop branch
Related commit(s):

• 1db38b0817f45b5062aaaa881ab7041aa2ea927f

The fix will be available with the upcoming 2.3.0 release.

[leoquijano]

For anyone interested, this one seems to be in place for the 2.2.6 release.