获取多个图像的组合宽度并应用于它们的包含 div

Question

我需要帮助的代码位于 www.photographeller.com/portfolio

我需要获取多个图像的组合宽度并将该解决方案用作它们包含的 div 的宽度。现在，我使用 jquery 在单击图像时应用一个类，将 4800px 的宽度添加到 div.innerOpen。对于很多部分来说，它太宽了，但至少它使所有图像都像他们应该的那样内联。如果宽度恰到好处，那么效果会更加平滑，这样不会有任何图像被向下推，或者当没有足够的图像比观看者的屏幕更宽时，只会达到 100% 的宽度。

这里有一个问题接近我的需要。

find child image width and apply it to containing parent div jquery

但是，该解决方案只采用第一张图片的宽度，而不是每张图片的宽度。

如果您对 jquery 或 javascript 有深入的了解，这似乎不会太难，不幸的是我是这些领域的新手。

任何帮助将不胜感激。谢谢！

Answer 1

能否修改 John Hartsock 的代码以找到最宽图像的宽度，然后再次将其添加到 div 的宽度？

因此，如果您的图像是 100 像素、10 像素和 10 像素，那么当前 div 的宽度将为 120 像素，但我需要它为 220 像素。

我的图像并排放置在它们包含的 div 中，当您将鼠标悬停在它们上时，它们的大小会翻倍。所以它们永远不会比 div 更宽，我需要最大的图像才能翻倍，并且所有图像都不会比 div 宽。

谢谢

Answer 2

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

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

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