Magento2画廊afterLoad回调

Question

如果屏幕宽度小于768px,我需要将产品图库导航缩略图移动到水平位置.

为此,我需要连接一个在完全加载库后触发的回调.

如何通过以下x-magento-init方法初始化图库窗口小部件时执行此操作:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                ...

            }
        }
    }
</script>

我尝试添加:

<script type="text/javascript">
    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        console.log($('[data-gallery-role=gallery-placeholder]').data('gallery'));
    });
</script>

它输出undefined.但是当我从控制台调用相同的东西时(在加载库之后)它包含了我可以调用fotorama API方法的库对象.

那么如何.data('gallery')在图库初始化后获取对象？

非常感谢!

Answer 1

我通过使用gallery:loaded添加fotorama api对象后触发的事件找到了解决方案.

<script type="text/javascript">
    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
            if($(window).width() < 768){
                $(this).on('fotorama:ready', function(){
                    var  api = $(this).data('gallery');
                    if(api.fotorama.options.navdir == 'vertical'){
                        api.fotorama.options.navdir = 'horizontal';
                        api.fotorama.resize();
                    }
                });
            }
        });
    });
</script>

使用api.updateOptions()on gallery:loaded事件更新选项不会执行任何操作,因为在该步骤之后会重置选项.所以我不得不挂钩fotorama:ready事件.