0

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?

0

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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.