Question

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

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

如何通过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

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

<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()事件上使用gallery:loaded更新选项不会执行任何操作，因为在该步骤之后会重置选项。所以我不得不挂钩fotorama:ready事件。

Answer 2

如果任何人在寻找幻灯片结束回调时仅使用fotorama:showend：

$(this).on('fotorama:showend', function (e) {
    console.log('slide end');
 })

Magento2画廊afterLoad回调

2 个答案: