Take combined width of multiple images and apply to their containing div

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

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 开发者_Python百科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.

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

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

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);
    });
});

Could John Hartsock's code be modified to find the width of the widest image, and add that to the div's width again?

So if your images were 100px, 10px and 10px currently the div's width would be 120px, but I need it to be 220px.

My images sit side by side in their containing div and double in size when you mouseover them. So their never wider than the div I need the largest image to be able to double in size, and for all the images to still not be wider than the div.

Thanks