Perfect fit for our current project.

We notice that on slow networks that the images collapse intermittently. From study it looks like it may be that the masonry script is loading before the images are fully loaded in the page Could you please guide us on how to resolve this - the gallery is perfect otherwise

Kindest regards Mike and Stephie

Just in case you need a fix for this: The problem appears to happen on slow image loads (large images, slow network) What happens is:

• The images are still loading when the magic grid script fires
• The magic grid creates a layout around partially loaded images, making the images stack on each other

This is a hack fix that worked for us We wanted 4 columns so we hacked the loadMagic4.js script in [webroot]/plugins/vektar/gallery/assets/js

// Instantiate the magic grid
let magicGrid = new MagicGrid({
  container: ".gallery", // Required. Can be a class, id, or an HTMLElement.
  static:true,
  animate: true, // Optional.
    gutter: 5,
    maxColumns: 4,
    useTransform: true,
    animate: true,
    useMin: true,
});
// Wait until the window loads
window.onLoad =function(){
  magicGrid.positionItems();
  magicGrid.listen();
}
// Fix layout
// Intialise the plugin
function fixLayout(){
  magicGrid.listen(); // re initialise
  console.log('Fix layout');
}
// Try to fix layout every second 
let timerId = setInterval(() => fixLayout(), 1000);

// After 5 seconds stop trying 
setTimeout(() => {
  clearInterval(timerId);
  console.log('Masonry stop')
  //document.write('stopping<br/>')
}, 5000);

Not pretty but it works so far. You can tweak the timer values if needed

Thanks! I had the same issue