获取jquery图像宽度并添加类

Question

I'm having trouble getting the dimensions of a series of images that are loading via PHP.

<?
    $Ldir="imgs/liveGallery/"; // Directory where files are stored

    if ($Lhandle = opendir($Ldir)) {
        while (false !== ($Lfile = readdir($Lhandle))) {
            if ($Lfile != "." && $Lfile != "..") $Lthefiles[] = $Lfile;
        }
        closedir($Lhandle);
    }

    sort($Lthefiles);

    for ($Li=0;$Li<count($Lthefiles);$Li++) { ?>
            <a href="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="ilightbox">
                <div class="adj">
                    <img src="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="percent">
                </div>
            </a>
    <?php } 
?>

In the above code PHP is doing its job loading all the images from a nearby directory. The .adj class is formatting the <div> into a square and floating them all to the left so they tile the screen. It's also hiding the overflow so that no matter the dimensions all you see is a square.

My issue comes when trying to read the widths and heights of the images that are being loaded into that <div>. I want to have the image fit at a width or height of 100% depending on which is proportional to fill the square. Here's the jquery code I thought should work.

$(window).load(function() { 
    $(".adj").each(function() {
        var $this = $(this);
        var imageWidth = $this.children("img").attr("width");
        var imageHeight = $this.children("img").attr("height");

        if (imageWidth < imageHeight){
            $this.addClass("aW");
        } else if (imageWidth > imageHeight) {
            $this.addClass("aH");
        }
    }); 
}); 

I don't seem to be capturing an image width or height at all, with what I wrote above.

I'm using fullpage.js and ilightbox.js which may be messing with my code, but I doubt it. I've also tried putting a modified version of this code inside the PHP for loop (without the jquery each function) and that doesn't work either. HELP!

Here's a link for you.

Answer 1

You have set the width and height in the css styling and not inline as attributes, So attributes width and height are empty

$this.children("img").attr("width"); // .attr would not work

Should be

$this.children("img").css("width"); // .css is the method

And

$(window).load(function() { 

    $(".adj").each(function() {
       var $this = $(this);
       // when your referring same img multiple times, grab it in a variable
       var image = $this.children("img"); 
       var imgWidth =  image.width(); // or image.css("width")
       var imageHeight = image.height(); // or image.css("height")
        if (imageWidth < imageHeight){
           $this.addClass("aW");
        } else if (imageWidth > imageHeight) {
           $this.addClass("aH");
       }
    }); 
}); 

note .css() gives in the px'.

Example 100px even though you set the values in pt or em etc. After seeing your code since your comparing the values I would suggest .width() and .height() as they return integer values and easy to compare

jQuery documentation

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width()