取多张图像的合并宽度并应用于其包含的div [英] Take combined width of multiple images and apply to their containing div

问题描述

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

The code I need help with is at www.photographeller.com/portfolio

我需要采用多个图像的组合宽度，并使用该解决方案作为其包含div的宽度.现在，单击图像为div.innerOpen添加4800px的宽度时，我使用jquery来应用一个类.对于很多部分来说，它太宽了，但至少可以做到，因此所有图像都按原本应该是内联的.如果宽度恰好合适，以至于没有图像被压下，或者在没有足够的图像宽度超过观看者的屏幕时，宽度变为100％，效果将会更加平滑.

I need to take the combined width of multiple images and use that solution as the width of their containing div. Right now, I use jquery to apply a class when an image is clicked that adds a width of 4800px to div.innerOpen. It's way too wide for a lot of the sections but it at least makes it so all the images are inline as they're supposed to be. The effect would be a lot smoother if the width was just the right amount so that none of the images got pushed down, or just went to 100% width when there's not enough images to be wider than the viewer's screen.

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

There is one question on here that came close to what I need.

找到子图像的宽度和将其应用于包含父div的jQuery

但是，该解决方案仅占用第一张图片的宽度，而不是每张图片的宽度.

But, that solution only takes the width of the first image, and not every image.

如果您对jquery或javascript有深刻的了解，这似乎并不难，不幸的是，我是这些领域的新手.

This seems like something that wouldn't be too hard if you have a firm understanding of jquery or javascript, which unfortunately I'm a novice in those areas.

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

Any help would be greatly appreciated. Thanks!

推荐答案

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

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

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

这篇关于取多张图像的合并宽度并应用于其包含的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！