Execute code after “text/x-magento-init” code finished loading

Question

I need to call a piece of code right after my fotorama gallery loaded. The gallery is called like this in vendor\magento\module-catalog\view\frontend\templates\product\view\gallery.phtml:

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="<?= /* @noEscape */ $mainImageData ?>"
    />
</div>

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
            }
        }
    }
</script>

I need to call a workaround script, to move some elements of the gallery in the DOM.

Currently I solved it rather hacky by calling javascript right after the above snippet:

<script>
    require([
        'jquery',
        'domReady!' // wait for dom ready
    ], function ($) {

        setTimeout(function() {

            console.log("workaround executed");
            $('.fotorama__thumb__arr').appendTo('.fotorama__nav-wrap');
        }, 1450);

    });
</script>

The code moves the navigation arrows to another place in the DOM, since it is not possible to configure them via the fotorama options and I need a workaround... (related question)

But this does not always work. It is really hacky.

Is there a callback function?

Answer 1

I found the answer in the fotorama API documentation:

Attach callbacks to the Fotorama events. Every callback contains the event object and refference to the API as a function arguments:

$('.fotorama').on('fotorama:ready', function (e, fotorama) {
  console.log(e.type, fotorama.activeIndex);
});

---

So I applied the knowledge:

<script>
    require([
        'jquery',
        'domReady!' // wait for dom ready
    ], function ($) {

        $('.gallery-placeholder').on('fotorama:ready', function (e, fotorama) {
            $('.fotorama__thumb__arr').appendTo('.fotorama__nav-wrap');
        });
    });
</script>