У меня есть миниатюра размером 250 на 250 пикселей. Я хочу получить исходную ширину и высоту при нажатии на миниатюру.

Моя скрипка на данный момент: http://jsfiddle.net/bf44f48p/

Я пробовал это сделать:

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

Любая помощь будет оценена, спасибо.

0
Devon 12 Ноя 2014 в 06:30

2 ответа

Лучший ответ

Демонстрация - 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>
2
Vitorino fernandes 12 Ноя 2014 в 03:54

Вы можете найти исходную ширину и высоту, используя naturalWidth и naturalHeight в HTML 5.

$(function () {
        var height = document.getElementById('img1').naturalHeight;
        var width = document.getElementById('img1').naturalWidth;
        alert("Original Height:" + height + " Original Width:" + width);
    });
0
Kawsar Hamid 12 Ноя 2014 в 03:57