0

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 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!

Community
  • 1
  • 1
Zach
  • 161
  • 1
  • 2
  • 10
  • why can't you give a fixed width for the container??? – kobe Dec 03 '10 at 21:26
  • why the parent container should be dynamic ?? – kobe Dec 03 '10 at 21:29
  • I wanted the width to be set dynamically because the number of images won't always be the same in each section. Sometimes the set width is way too big and there would be a large empty space after the row of images. – Zach Dec 05 '10 at 07:32

2 Answers2

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

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

        $(this).width(totalImageWidth);
    });
});
John Hartsock
  • 85,422
  • 23
  • 131
  • 146
0

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

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • Try asking a new question and just linking back to this question for reference. I'm not exactly sure how. – Zach Jan 29 '11 at 16:56
  • EDIT- Got it working with window load. Not sure what the downside is to this as most people use dom ready. – Evanss Feb 07 '11 at 10:58