Magento – Magneto2 – How to remove product image fullscreen and zoom in mobile product page

fotorama-slidermagento2

I want to enable product zoom and fullscreen light box on desktop but disable them on mobile. I am working on 2.1.6 in theme etc/view.xml.
I can remove/enable product images fullscreen light box on desktop.

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

remove/enable product image zoom in desktop

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

I tried to apply this in mobile breaks points like below, but it does not work for both fullscreen and zoom.

<var name="breakpoints">
    <var name="mobile">
        <var name="conditions">
            <var name="max-width">767px</var>
        </var>
        <var name="options">
            <var name="options">
                <var name="nav">dots</var>
                <var name="allowfullscreen">false</var>
                <var name="magnifier">
                    <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
                </var>
            </var>
        </var>
    </var>
</var>

Thanks for any help and comments

Best Answer

I also faced same issue and then found the below working solution. Hope will help someone.

   <var name="breakpoints">
        <var name="mobile">
            <var name="conditions">
                <var name="max-width">767px</var>
            </var>
            <var name="options">
                <var name="options">
                    <var name="nav">thumbs</var>
                    <var name="allowfullscreen">false</var> <!--If want full screen then make it true. Zoom function will automatically disabled-->
                </var>
            </var>
        </var>
    </var>

Related Solutions

Magento 2 – Set First Image of Slider in Fotorama JS After Cancel Fullscreen Popup

You can do this by extending the mage/gallery/gallery js module and then calling your JS in the template rather than the core gallery.js file.

Selecting the first element after closing an image can be done like so:

define([
    'jquery',
    'mage/gallery/gallery'
], function ($, Gallery) {
    'use strict';

    return Gallery.extend({

        initFullscreenSettings: function () {
            var settings = this.settings,
                self = this;

            this._super();

            settings.$gallery.on('fotorama:fullscreenexit', function () {
                settings.closeIcon.hide();
                settings.focusableStart.attr('tabindex', '-1');
                settings.focusableEnd.attr('tabindex', '-1');
                settings.api.updateOptions(settings.defaultConfig.options, true);
                settings.focusableStart.unbind('focusin', this._focusSwitcher);
                settings.focusableEnd.unbind('focusin', this._focusSwitcher);
                settings.closeIcon.hide();

                if (!_.isEqual(settings.activeBreakpoint, {}) && settings.breakpoints) {
                    settings.api.updateOptions(settings.activeBreakpoint.options, true);
                }
                settings.isFullscreen = false;
                settings.$element.data('gallery').updateOptions({
                    swipe: true
                });

                self.settings.api.first();
            });
        }
    });
});

Magento 2 – Disable Product Magnification/Zoom

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.

Best Answer

Related Solutions

Magento 2 – Set First Image of Slider in Fotorama JS After Cancel Fullscreen Popup

Magento 2 – Disable Product Magnification/Zoom

Related Topic