Magento2 画廊 afterLoad 回调答案

【问题标题】：Magento2 gallery afterLoad callbackMagento2 画廊 afterLoad 回调
【发布时间】：2016-11-08 07:34:43
【问题描述】：

如果屏幕宽度小于 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') 对象呢？

非常感谢！

【问题讨论】：

为什么不使用 css 媒体查询？
@madalinivascu 这不是效率低下吗？垂直/水平定位的 css 已经存在，为什么要创建新规则？除此之外，他们还为您提供了更改画廊行为的 javascript 方法。我需要学习如何访问这些，然后只需一行代码。

标签： javascript jquery magento2 fotorama

【解决方案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事件。

【讨论】：

你的答案对我有用，但画廊：加载的事件在生产模式下不起作用。为什么会这样？你对这个问题有什么想法吗？

【解决方案2】：

如果有人在寻找幻灯片结束回调，只需使用fotorama:showend：

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

【讨论】：