jquery images with equal height

Question

I am trying to write a Jquery function which will match the heights of all images on a page with the same class name.

This works as expected providing the internet connection is decent. If the images take a while to load, then it fails to display any images. I assume the function is determining the image to be 0px height and setting this to all.

How can I get around this?

Many thanks

function equalizeClass(className) {
    var equaliserHeight = 0;
    var height = 0;
    var i = 0;
    $('.'+className).each(function() {
        $(this).imagesLoaded(function() {
            i++;
            height = $(this).height();
            if(height>equaliserHeight) {
                equaliserHeight = height;
            }   
        });
    });
    $('.'+className).css("height", equaliserHeight);
}

$(function() {
equalizeClass('products-page-product-img'); // Equalize product list thumbnails
});

The clue would be you might need to check once all the images are loaded, then you need to do the equalisation. — Praveen Kumar Purushothaman, Feb 09 '16 at 14:45
I have added imagesLoaded() plugin from desandro.com which seamed to be what I need. But now the images won't show at all and I get the following error in my console. Is this clashing with my bootstrap maybe? - Uncaught TypeError: Cannot read property 'defaultView' of undefined — Thomas Hughes, Feb 09 '16 at 14:53
you can try imagesloaded library, so you know when an image is loaded and take action -- http://imagesloaded.desandro.com/ — Tasos, Feb 09 '16 at 14:57
@Tasos Did you even see what Thomas said in his previous comment? — Praveen Kumar Purushothaman, Feb 09 '16 at 14:58

score 2 · Accepted Answer · answered Feb 09 '16 at 14:53

2

Just wait to page load. Replace:

$(function() {
  equalizeClass('products-page-product-img');
});

with:

$(window).load(function() {
  equalizeClass('products-page-product-img');
});

answered Feb 09 '16 at 14:53

Marek Skrzyniarz

56
5

jquery images with equal height

1 Answers1