Magneto2 - How can I remove product image fullscreen and zoom in mobile product page

I want to enable product zoom and fullscreen light box in desktop but disable them in mobile. I am working on 2.1.6

in theme etc/view.xml

I can remove/enable product image fullscreen light box in 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

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

bumped to the homepage by Community♦ 12 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

I want to enable product zoom and fullscreen light box in desktop but disable them in mobile. I am working on 2.1.6

in theme etc/view.xml

I can remove/enable product image fullscreen light box in 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

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

bumped to the homepage by Community♦ 12 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

I want to enable product zoom and fullscreen light box in desktop but disable them in mobile. I am working on 2.1.6

in theme etc/view.xml

I can remove/enable product image fullscreen light box in 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

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

I want to enable product zoom and fullscreen light box in desktop but disable them in mobile. I am working on 2.1.6

in theme etc/view.xml

I can remove/enable product image fullscreen light box in 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

magento2 fotorama-slider

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

edited Aug 14 '17 at 23:28

asked Aug 14 '17 at 8:05

user1506075

296211

asked Aug 14 '17 at 8:05

user1506075

296211

asked Aug 14 '17 at 8:05

user1506075

296211

bumped to the homepage by Community♦ 12 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ 12 mins ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

add a comment |

2 Answers
2

active

oldest

votes

It's late but the question has no answer yet. So posting this.

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>

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

add a comment |

After a lot of tests, I found that there isn't necessary 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>

answered Feb 1 '18 at 10:45

Ovidiu Pop

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f189031%2fmagneto2-how-can-i-remove-product-image-fullscreen-and-zoom-in-mobile-product%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

It's late but the question has no answer yet. So posting this.

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>

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

add a comment |

It's late but the question has no answer yet. So posting this.

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>

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

add a comment |

It's late but the question has no answer yet. So posting this.

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>

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

It's late but the question has no answer yet. So posting this.

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>

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

answered Oct 9 '17 at 11:24

Akhil Gupta

1,5091720

add a comment |

After a lot of tests, I found that there isn't necessary 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>

answered Feb 1 '18 at 10:45

Ovidiu Pop

add a comment |

After a lot of tests, I found that there isn't necessary 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>

answered Feb 1 '18 at 10:45

Ovidiu Pop

add a comment |

After a lot of tests, I found that there isn't necessary 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>

answered Feb 1 '18 at 10:45

Ovidiu Pop

After a lot of tests, I found that there isn't necessary 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>

answered Feb 1 '18 at 10:45

Ovidiu Pop

answered Feb 1 '18 at 10:45

Ovidiu Pop

answered Feb 1 '18 at 10:45

Ovidiu Pop

answered Feb 1 '18 at 10:45

Ovidiu Pop

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj