get jquery image width and add class - php

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 can try somethig like
$(window).load(function() {
$(".adj").each(function () {
var $this = $(this);
var img = new Image();
//Set Image source
img.src = $this.children("img").attr("src");
//Wait for image to be loaded.
//Event will fire when image is loaded
img.onload = function () {
//Get Height and width
var imageWidth = img.width;
var imageHeight = img.height;
if (imageWidth < imageHeight) {
$this.addClass("aW");
} else if (imageWidth > imageHeight) {
$this.addClass("aH");
}
};
});
});
Note: I am not sure, this is a best practice

Answer 2

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()