Возьмите объединенную ширину нескольких изображений и примените к их содержанию div

Question

Код, с которым мне нужна помощь, находится по адресу www.photographeller.com/portfolio

.

Мне нужно взять объединенную ширину нескольких изображений и использовать это решение в качестве ширины содержащего их div. Прямо сейчас я использую jquery для применения класса при нажатии на изображение, которое добавляет ширину 4800px к div.innerOpen. Он слишком широк для многих разделов, но, по крайней мере, делает так, чтобы все изображения были встроенными, как и должно быть. Эффект был бы намного более плавным, если бы ширина была просто правильной величиной, так что ни одно из изображений не было сдвинуто вниз, или просто переместилась на 100% ширину, когда недостаточно изображений, чтобы быть шире, чем экран зрителя.

Здесь есть один вопрос, который приблизился к тому, что мне нужно.

найти ширину дочернего изображения и применить ее к содержанию родительского div jquery

Но это решение принимает только ширину первого изображения, а не каждое изображение.

Это похоже на то, что не будет слишком сложно, если у вас есть четкое понимание jquery или javascript, что, к сожалению, я новичок в этих областях.

Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Можно ли изменить код Джона Хартсока, чтобы найти ширину самого широкого изображения, и снова добавить это к ширине div?

Так что, если ваши изображения были 100px, 10px и 10px, в настоящее время ширина div будет равна 120px, но мне нужно, чтобы она была 220px.

Мои изображения располагаются рядом с содержащимися в них div и удваиваются в размере при наведении на них курсора мыши. Таким образом, их размер не должен быть шире, чем у div. Мне нужно, чтобы наибольшее изображение удваивалось в размере, и чтобы все изображения не были шире, чем у div.

Спасибо

Answer 2

$(document).ready(function() {
    $('div').each(function() {
        var totalImageWidth = 0;

        $("img", this).each(function () {
          totalImageWidth += $(this).width();
        });

        $(this).width(totalImageWidth);
    });
});