Magento2 gallery afterLoad callback

Question

I need to move the product gallery navigation thumbnails on horizontal position if the screen is less than 768px wide.

For this I need to hook up on a callback that is triggered after the gallery is completely loaded.

How to do this when the gallery widget is initialized via the x-magento-init method:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                ...

            }
        }
    }
</script>

I tried adding:

<script type="text/javascript">
    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        console.log($('[data-gallery-role=gallery-placeholder]').data('gallery'));
    });
</script>

And it outputs undefined. But when I call the same thing from the console (after the gallery was loaded) it contains the gallery object where I can call the fotorama API methods.

So how can I get the .data('gallery') object after the gallery is initialized ?

Many thanks!

@madalinivascu wouldn't this be inefficient? The css is already there for the veritcal / horizontal positioning, why creating new rules ? Besides that they offers you javascript methods to change the gallery behavior. I need to learn how to access those and after that would be just a line of code. — Serbu Florin-Adrian, Jul 06 '16 at 09:50

score 21 · Accepted Answer · answered Jul 06 '16 at 12:09

I found the solution by using the gallery:loaded event that is triggered after the fotorama api object is added.

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

Updating options with api.updateOptions() on gallery:loaded event does nothing because the options are reset after that step. So I had to hook to fotorama:ready event.

Your answer is working for me, but the gallery: loaded event is not working in production mode. Why this is happening? do you have any idea about this issue? — Siranjeevi K S, Aug 30 '21 at 11:07

score 0 · Answer 2 · answered Sep 17 '19 at 13:43

0

In Case anyone looking for slide end callback just use fotorama:showend:

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

answered Sep 17 '19 at 13:43

Juliano Vargas

284
2
19

Magento2 gallery afterLoad callback

2 Answers2