Question

I’m using javascript to add either the class vertical or horizontal to all image articles on a page. I’m having the problem that the code is working, but it’s ALWAYS adding .horizontal to the article class, even photos that should have .vertical (posts that contain images larger than 450px high). Any help would be appreciated.

$('img.photo').each(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });

Example: http://blog.jamescharless.com/
The first photo of the boy is way more than 450px tall but it doesn’t have the class of vertical, instead it has horizontal.

Answer 1

Try changing .each to .load, so that the function is called for each image once it’s loaded:

$('img.photo').load(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });