Retrieve original image length & height with jquery?

Total Post:45

Points:315
JQuery  HTML  CSS 
 1239  View(s)
Ratings:
Rate this:

I have a display thumbnail at 250px by 250px. I want to be able to retrieve its original width and height when clicking on the thumbnail.

I tried doing this:

$(function() {
    $(".img_section").on('click',function() {
        var img = $(this).children(".test_img").attr("src");
        theImg.src =img.attr("src");
 
        var imgNaturalWidth = theImg.width();
        var imgNaturalHeight = theImg.height();
 
        alert(imgNaturalWidth);
        alert(imgNaturalHeight);
}) // not working

Any help will be appreciated, thanks.

  1. Post:341

    Points:2389
    Re: Retrieve original image length & height with jquery?

    $(function () {
        $(".img_section").on('click', function () {
            $this = $(this).children('img');
            var image = new Image();
            image.src =$this.attr("src");
            image.onload =function () {
                alert('width:' + this.width +' '+'height: '+ this.height); /* calculation the width  and height from image onload */
            };
        });
    });

      Modified On Apr-09-2018 12:37:38 AM

Answer