artpolikarpov / fotorama

A simple, stunning, powerful jQuery gallery.
http://fotorama.io
Other
1.58k stars 380 forks source link

Multiple breakpoints in view.xml don't work #552

Closed DanielVercouteren closed 5 years ago

DanielVercouteren commented 5 years ago

I have multiple breakpoints in view.xml because I want to have the following order: On mobile (0px - 767px) - no thumbs, only dots On tablet (768px - 1199px) - no dots, horizontal thumbs On desktop (1200px >) - no dots, vertical thumbs

Code I have the following xml setup:

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <vars module="Magento_Catalog">
        <var name="gallery">
            <var name="width">100%</var>
            <var name="ratio">1455/768</var>
            <var name="margin">0</var>
            <var name="maxheight">554</var>
            <var name="nav">thumbs</var>
            <var name="navwidth">100%</var>
            <var name="navdir">vertical</var>
            <var name="thumbwidth">78</var>
            <var name="thumbheight">66</var>
            <var name="thumbmargin">10</var>
            <var name="thumbborderwidth">1</var>
            <var name="thumbfit">contain</var>
            <var name="arrows">always</var>
            <var name="loop">true</var>
            <var name="allowfullscreen">false</var>
            <var name="swipe">true</var>
        </var>
        <var name="breakpoints">
            <var name="desktop">
                <var name="conditions">
                    <var name="min-width">1200px</var>
                </var>
            </var>
            <var name="tablet">
                <var name="conditions">
                    <var name="min-width">768px</var>
                    <var name="max-width">1199px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="width">100%</var>
                        <var name="fit">cover</var>
                        <var name="ratio">478/393</var>
                        <var name="margin">0</var>
                        <var name="nav">thumbs</var>
                        <var name="navwidth">100%</var>
                        <var name="navdir">horizontal</var>
                        <var name="loop">true</var>
                        <var name="thumbwidth">71</var>
                        <var name="thumbheight">100%</var>
                        <var name="thumbmargin">10</var>
                        <var name="thumbborderwidth">1</var>
                        <var name="thumbfit">contain</var>
                        <var name="arrows">always</var>
                        <var name="allowfullscreen">false</var>
                        <var name="swipe">true</var>
                    </var>
                </var>
            </var>
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="width">100%</var>
                        <var name="ratio">320/263</var>
                        <var name="maxheight">263</var>
                        <var name="nav">dots</var>
                        <var name="navdir">horizontal</var>
                        <var name="allowfullscreen">false</var>
                        <var name="loop">true</var>
                        <var name="arrows">always</var>
                        <var name="trackpad">false</var>
                        <var name="shuffle">false</var>
                        <var name="swipe">true</var>
                    </var>
                </var>
            </var>
        </var>
    </vars>
</view>

Behaviour If I open the page on desktop size and then make it smaller by shrinking the size of the page it works for tablet and mobile. If I open the page on tablet size however it shows the desktop configuration (so vertical thumbs). If I then resize to desktop size and then shrink again it shows the tablet configuration. If I open the page on mobile size it appears to work, except when I grow the size to tablet size, it shows the desktop configuration again.

Is there a fix possible to have the breakpoints working as expected?

artpolikarpov commented 5 years ago

I'm sorry, I don't see how that has anything to do with the plugin. I'm not familiar with xml, I don't understand the example and I'm afraid I can't help.