CODEWITHSUNDEEP
jqueryhtmlcss
Devon
Devon

Reputation: 159

How to retrieve original image length & height with jquery?

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.

My fiddle so far: http://jsfiddle.net/bf44f48p/

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.

Upvotes: 0

Views: 57

Answers (2)

Kawsar Hamid
Kawsar Hamid

Reputation: 514

You can find original width and height using naturalWidth & naturalHeight in HTML 5.

$(function () {
        var height = document.getElementById('img1').naturalHeight;
        var width = document.getElementById('img1').naturalWidth;
        alert("Original Height:" + height + " Original Width:" + width);
    });

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/victor_007/bf44f48p/5/

$(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 */
        };
    });
});


$(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);
        };
    });
});
.img_section {
    background: black;
    position: relative;
    width: 100%;
    /* for IE 6 */
}
.test_img {
    width:250px;
    height:250px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="img_section">
    <img class="test_img" src="http://i.imgur.com/MwegAOI.jpg" alt="logo">
</div>

Upvotes: 2

Related Questions