Only one instance of Flexmasonry working about flexmasonry

[enzedonline]

Just came to report this too. I created a block that editors can add to a page in their CMS multiple times, each time can have different column config.

It seems only the last class name used in the init is retained. The JS does a refreshAll() when the window is resized, this only refreshes the elements with class the init was called with.

I worked around this by adding a couple of lines after my init code:

            FlexMasonry.init(
                   .grid-{{block.id}},
                    ....
                );
            el = document.getElementsByClassName('grid-{{block.id}}')[0]
            window.addEventListener('resize', FlexMasonry.refresh(el));

Each of my blocks calls FlexMasonry with a unique classname, I add an extra resize listener for each block which add responsiveness back to each block.

For your case above, just add a listener for js-image-gallery I guess.