3

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

1

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>
1
  • This is the working answer, tested in 2.2.7 – Cypher909 May 3 '19 at 19:07
0

After a lot of tests, I found that there aren't necessarily double "options". To avoid fullscreen on mobile devices, must set false also for normal devices.

<var name="breakpoints">
    <var name="mobile">
        <var name="conditions">
            <var name="max-width">767px</var>
        </var>
        <var name="options">
            <!--<var name="options">-->
            <var name="allowfullscreen">false</var>
                <var name="nav">dots</var>
            </var>
            <!--</var>-->
        </var>
    </var>
</var>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.