Magento2 gallery afterLoad callback

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. Но когда я вызываю то же самое с консоли (после загрузки галереи), он содержит объект галереи, где я могу вызвать методы API fotorama.

Как я могу получить объект .data('gallery') после инициализации галереи?

Большое спасибо!

Answer 1

Я нашел решение, используя событие gallery:loaded, которое запускается после добавления объекта api fotorama.

<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.