Using JQuery to resize and realign images doesn't work on first load

Question

So I am relatively inexperienced with Jquery. What I did was purchase a wordpress theme from theme forest and it has a portfolio section which is supposed to work either as a masonry or grid layout. Neither of which load correctly on first load. The theme uses the Isotope, and I think this link explains what needs to be done: http://isotope.metafizzy.co/appendix.html#imagesloaded

Below is the code that I think calls this function, and the site can be viewed here https://www.roseryflowers.com/bridal-gallery/

jQuery(document).ready(function($) {
/*--  Portfolio --*/
if ($('.portfolio-items').length > 0) {
    $container = $('.portfolio-items');
    $container.isotope({filter: '.element'});
    $(window).trigger('resize');
    $('.portfolio-links a').click(function(e){
        e.preventDefault();
        var $this = $(this);
        if ($this.hasClass('active')) {
            return false;
        }
        $this.parents('.portfolio-links').find('.active').removeClass('active');
        $this.parent().addClass('active');
        $this.addClass('active');

        var selector = $this.attr('data-filter');
        $container.isotope( {filter: selector} );
    });
}

I am at a loss for what to do here. Any help would be appreciated. I even implemented a preloader.

Answer 1

From Isotope's documentation

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded works by triggering a callback after all child images have been loaded.

initialize Isotope after all images have loaded

var $container = $('#container').imagesLoaded( function() {
 $container.isotope({
    //options
  });
});

This could be the problem

There is a little bit more about...

EDIT

your wrapper tag is ".portfolio-items" then try this

var $container = $('.portfolio-items').imagesLoaded(function () {

  if ($('.portfolio-items').length > 0) {
    $container = $('.portfolio-items');
    $container.isotope({ filter: '.element' });
    $(window).trigger('resize');
    $('.portfolio-links a').click(function (e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.hasClass('active')) {
            return false;
        }
        $this.parents('.portfolio-links').find('.active').removeClass('active');
        $this.parent().addClass('active');
        $this.addClass('active');

        var selector = $this.attr('data-filter');
        $container.isotope({ filter: selector });
    });
  }
});

You need to be sure to add ImagesLoaded to your project https://github.com/desandro/imagesloaded

Answer 2

Remove the imagesloaded.js file from your page and change the line with

$(window).trigger('resize');

to

$(window).load(function(){ $(window).trigger('resize'); });