Как добавить ширину всех изображений в div с помощью JQuery

Question

Я искал способ изменить ширину элемента div на сумму всех значений ширины изображения в этом элементе.

Другими словами, я хотел, чтобы # page-content имел ширину, равную ширине всех изображений внутри него. Это потому, что я хотел бы, чтобы div содержимого страницы был шире, чем окно браузера, чтобы пользователь мог прокручивать его слева направо.

код, который я имел, был следующим:

    <div id="page-content">
    <div id="gallery">
        <div>
            <a href="#" class="shutterset">
                <img src="images/pic1.jpg"/>
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic2.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic3.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic4.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic5.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic6.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic7.jpg" />
            </a>
            <a href="#" class="shutterset" >
                <img src="images/pic8.jpg" />
            </a>
        </div>
        <div class="clear"> </div>
        <p>hi</p>
    </div>
</div>

И jQuery, который я опробовал, был:

        $(document).ready(function() {
        $("p").html($("#gallery img:first").width());
    });

Я сделал это, чтобы проверить, рассчитывается ли ширина, но, похоже, это не так. Результат всегда равен 0, а не ширине изображения.

Буду признателен за любую помощь

Зеедорф

Answer 1

Я предлагаю добавить класс к изображениям, так как у вас есть ссылки, т.е. <img class="shutterimg" и попробовать это в функции $ (window) .load, чтобы убедиться, что они загружены:

var totalwidth = 0;
$('img.shutterimg').each(function() {
    totalwidth += $(this).width();
});
$('#gallery').width(totalwidth);

Answer 2

Ширина изображения не рассчитывается до тех пор, пока изображение не будет загружено, если не указан атрибут width. Ваш обработчик выполняется на $(document).ready() - это когда вся DOM загружена, но почти наверняка будет до загрузки изображений.

Вместо этого дождитесь события $(window).load(): оно срабатывает, когда весь контент (изображения, таблицы стилей и скрипты) загружен.

$(window).load(function() {
    $("p").html($("#gallery img:first").width());
});