Magento 2 – Disable Product Magnification/Zoom

magento2zoom

I've added this to default.xml, which partially works to remove the zoom feature

<head>
    <remove src="Magento_Catalog::js/jquery.zoom.min.js" />
</head>

However, a magnifying glass still appears above the product image on the product detail page.

I've noticed sections in view.xml, specifically vendor/magento/theme-frontend-blank/etc/view.xml which parameterize a magnifier, one of these seems to toggle it on or off –

<var name="magnifier">
   <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>

This is set to false in my theme's view.xml file as well. Any idea what else I need to do to completely remove the magnification / zoom feature in Magento2?

Best Answer

Having experimented with more settings in the view.xml file, it seems changing

<var name="allowfullscreen">true</var>

<var name="allowfullscreen">false</var>

solved the problem.

Related Solutions

Product Page Zoom Level Adjustment

From my understanding Magento version 1.8 and less do not zoom the image as such but simply shows the image in full. See app/design/frontend/base/default/template/catalog/product/view/media.phtml

For version 1.9 with the rwd design installed I think it simply resizes the image to width 1200px. See app/design/frontend/rwd/default/template/catalog/product/view/media.phtml

<?php
    $i=0;
    foreach ($this->getGalleryImages() as $_image):
        $_imageUrl = $this->helper('catalog/image')
                          ->init($_product, 'image', $_image->getFile())
                          ->keepFrame(false)
                          ->constrainOnly(true)
                          ->resize(1200);
?>
    <img id="image-<?php echo $i; ?>"
         class="gallery-image"
         src="<?php echo $_imageUrl; ?>"
         data-zoom-image="<?php echo  $_imageUrl; ?>" />
<?php
    $i++;
    endforeach;
?>

Magento 1.9 – How to Remove Elevate Zoom

Open

app/design/frontend/base/default/template/catalog/product/view/media.phtml

Comment below code

<!-- <script type="text/javascript">
    //<![CDATA[
        Event.observe(window, 'load', function() {
            product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
        });
    //]]>
    </script>-->

Best Answer

Related Solutions

Product Page Zoom Level Adjustment

Magento 1.9 – How to Remove Elevate Zoom

Related Topic