Can't get vertical images

Question

I'm using the following code to get vertical images and add class to it but, I don't know why, is not working:

    //wrapall div inside a container
    $('#page_container .et_pb_column_1 .et_pb_module').wrapAll('<div class="slider-pag_interna">');

    //for each img I check height and width and assign some classes
    $(".slider-pag_interna div span img ").each(function(){
        
        if ($(this).width() < $(this).height()) {
          $(this).parent().parent().addClass("vertical");
        }
        else{
            $(this).parent().parent().addClass("horizontal");
        }
        
    });

My html code:

<div id="page_container" class="et_pb_row et_pb_row_0 et_pb_row--with-menu" style="z-index: 3;">
        <div class="et_pb_column et_pb_column_1_2 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough et-last-child">
            <div class="et_pb_module et_pb_image et_pb_image_0">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_1">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_2">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://www.threebu.it/wp_threebu/wp-content/uploads/2017/06/vertical-farming-chris-jacobs.jpg" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_3">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
        </div>

My test page

Please include the html/images in the question, ideally in a snippet (edit and click `[<>]`). — freedomn-m, Apr 01 '21 at 14:08
What exactly is not working ? on your test page i do see the correct classes on the `.et_pb_module` container — estellechvl, Apr 01 '21 at 14:14
Ah - didn't see the *extra* .wrapAll() (**not mentioned here**) As stated earlier, please include all relevant information **in the question**. See [mcve]. — freedomn-m, Apr 01 '21 at 14:22
Copied code to a jsfiddle - works fine: https://jsfiddle.net/7untm5kh/ As above by @estellechvl opening your page and inspecting the images show they have the classes as expected. — freedomn-m, Apr 01 '21 at 14:25
Your issue is that doc.ready runs **before the images are loaded**. So as @AkshAyAgrawal notes, the sizes are 0. When estellechvl and I checked, your code, it (likely) used cached images so there was no loading time. You need to hook into the image loaded event. `window.onload` see https://stackoverflow.com/a/3698214/2181514 — freedomn-m, Apr 01 '21 at 14:28
Check the 3rd image on the fiddle.. It has horizontal class applied to it, but it should have had Vertical class applied to it, as per the intended logic — AkshAy Agrawal, Apr 01 '21 at 14:28
@AkshAyAgrawal yes, because the code ran before the image had loaded - for *me* it has the `vertical` class applied. — freedomn-m, Apr 01 '21 at 14:30
yep, freedomn-m is right. so basically wrapping your code into something like `$(window).on("load", () => {});` should do the trick — estellechvl, Apr 01 '21 at 14:32

score 1 · Answer 1 · answered Apr 02 '21 at 19:48

Insert all things inside "window on load" function instead of "document ready" fixed the problem

$(window).on('load', function(){

    $('#page_container .et_pb_column_1 .et_pb_module').wrapAll('<div class="slider-pag_interna">');

    $(".slider-pag_interna div span img ").each(function(){
        
        if ($(this).width() < $(this).height()) {
          $(this).parent().parent().addClass("vertical");
        }
        else{
            $(this).parent().parent().addClass("horizontal");
        }
        
    });
});

score -1 · Answer 2 · answered Apr 01 '21 at 14:15

-1

Your scripts seem to be executing BEFORE the DOM is rendered, and that is why all width v/s height comparisons in your script are returning FALSE. Height = 0 and Width = 0 for all elements.

Your Jquery code is placed in the <head> tag right now on your test page. Try moving it to the <body> section in your code, and things will work out fine..

answered Apr 01 '21 at 14:15

AkshAy Agrawal

163
1
8

Try debugging it in the Chrome debugger, you'll see the height and width for all images is returned as ZERO. When I copied over the scripts to the body section, things worked fine. – AkshAy Agrawal Apr 01 '21 at 14:24
I was trying also window on load function but sometimes it did not work maybe it was a cache problem...I was thinking that 'window on load' function was running during loading and 'document ready' was the function for everything after the entire windows contents was loaded... I feel so stupid now... – GGKMNTN Apr 02 '21 at 18:12
So GGKMNTN, Finally how did you fix things ? – AkshAy Agrawal Apr 02 '21 at 19:21
I inserted all things inside "window on load function" instead of "document ready" – GGKMNTN Apr 02 '21 at 19:43

Can't get vertical images

2 Answers2