Magento2 图库加载后回调

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

我通过使用添加 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>

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

Answer 2

万一任何人寻找幻灯片结束回调只需使用 fotorama:showend:

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

Magento2 图库加载后回调

Magento2 gallery afterLoad callback

javascript

jquery

magento2

fotorama