CODEWITHSUNDEEP
javascriptjquery
WAS
WAS

Reputation: 59

Getting true dimensions of images with jquery on collected dom elements

I am trying to get the dimensions of images on a page for further use with a custom 'lightbox' or sorts. However, when trying both a pure js method, and a jquery method, I get the output undefined on my variables. Why is this? Is it because of jquery load event? I tried both onload and ready.

Basically I need the full dimensions of the image to justify whether it should be loaded in a lightbox with a click event or not.

Update I am now able to get console feedback from the function now, however it's not providing me a dimension of the image. 

$('.postbody').find('img').each(function() {
    var img = new Image(), width, height;
    $(img).load(function() {
        width = $(this).width();
        height = $(this).height();
        console.log('Width: '+width+' Height: '+height);
    });
    console.log($(this).attr('src'));
    img.src = $(this).attr('src');
});
#theater-box {
    display: none;
    position: fixed;
    width: auto;
    height: auto;
    min-width: 1005px;
    max-width: 1428px;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.90);
    border: 2px solid rgba(255,255,255,0.4);
}

.postbody {
    width: 90%;
    height: 90%;
    background: rgba(100,50,50,0.5);
}

.postbody * img {
    width: 100%;
    max-width: 1168px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="theater-box"></div>

<div class="postbody">
    <div id="someclass"><img src="https://e8zzxa.bl3301.livefilestore.com/storageservice/passport/auth.aspx?sru=https:%2f%2fe8zzxa.bl3301.livefilestore.com%2fy2pDapooeiISgUV7-ugpyADuRULJ_stpkiALbypYJHjNxrhUqcvRsZ6eRk4PiJlClABLOfByjulDSDLOMCEpHhggVkgvM4z5Gdq0Jo-C0e1pCU%2fMajipoorHighlands2.jpg&wa=wsignin1.0" /></div>
</div>

Upvotes: 0

Views: 55

Answers (4)

WAS
WAS

Reputation: 59

I'm not exactly sure why the original method (which works in a lot of examples) was not working here. So I found some awesome code by GregL from right here at Stackoverflow.

Essentially, the method loads a new, and hidden image into the body, and then captures the width and height before removing it. 

$('.postbody').find('img').each(function() {
    var img = $(this), width, height,
        hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    width = hiddenImg.height();
    height = hiddenImg.width();
    hiddenImg.remove();       
    console.log('Width: '+width+' Height: '+height);
});

Check out the Fiddle

Upvotes: 0

Michiel Dral
Michiel Dral

Reputation: 4074

You are setting the variables asynchronously and getting it directly. In pseudocode it is a bit like this:

  1. Set the function to retrieve the width and height when the images loads
  2. Display the width and height variables (not set yet)
  3. The functions set in step 1 runs and sets the varaibles.

So your code that uses the width and height should be inside the image.load function. I hope it helps, if you have any further questions dont hesitate to comment :-)

Upvotes: 1

Levi Beckman
Levi Beckman

Reputation: 533

Try this...

$(img).load = function() {
    var $this = $(this);
    width = $this.width();
    height = $this.height();
}

Upvotes: 0

B W
B W

Reputation: 712

Perhaps you can just put the console.log line as the last line in the $(img).load function.

Upvotes: 0

Related Questions