Where is this equal height jQuery going wrong?

I have a gallery where the thumbnails are not all the some height, which causes the titles beneath them to be uneven in the row. I put a wrapper around each image and am trying to make those all the same height (the height of the tallest thumbnail in the row) so the titles will be straight. I thought this would be straightforward, but I can't seem to get it to work. Any idea where I'm going wrong?

The HTML:

<div class="row galleryrow">
    <div class="one-third">
        <figure>
            <div class="gallerywrapper">
                <img src="http://placekitten.com/150/100">
            </div>
            <figcaption>
                Picture 1
            </figcaption>
		</figure>
	</div>
    <div class="one-third">
        <figure>
            <div class="gallerywrapper">
                <img src="http://placekitten.com/150/150">
            </div>
            <figcaption>
                Picture 2
            </figcaption>
		</figure>
	</div>
    <div class="one-third">
        <figure>
            <div class="gallerywrapper">
                <img src="http://placekitten.com/150/75">
            </div>
            <figcaption>
                Picture 3
            </figcaption>
		</figure>
	</div>
</div>
etc...

Open in new window


The jQuery:
$(document).ready(function () {    
	$('.galleryrow .gallerywrapper').each(function() {

		var $sameHeightChildren = $(this).find('.gallerywrapper');
		var maxHeight = 0;

		$sameHeightChildren.each(function() {
			maxHeight = Math.max(maxHeight, $(this).outerHeight());
		});

		$sameHeightChildren.css({ height: maxHeight + 'px' });
    });
});

Open in new window


(I also put a Fiddle here.)

Thanks!
SiobhanElaraAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rajar AhmedConsultantCommented:
Try this,
http://jsfiddle.net/AjBv9/7/
$(document).ready(function () {    
    
    
   var maxHeight = -1;
    
    $('.galleryrow .gallerywrapper').each(function() {
             maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    alert(maxHeight);	
    $('.galleryrow .gallerywrapper').each(function() {
             $(this).css({ height: maxHeight + 'px' });
   	});
	 
    
});

Open in new window

0
SiobhanElaraAuthor Commented:
Thanks, meeran03! That makes all the wrappers the same height, which is close, but I'm trying to get all the wrappers in each row the height for the tallest in that row. (If there's one really tall thumbnail in the bunch I don't want it to cause all the thumbnails on the page to appear way above their titles.

I made the issue more obvious here: http://jsfiddle.net/AjBv9/8/
0
Rajar AhmedConsultantCommented:
hi SiobhanElara,

Try this,
 http://jsfiddle.net/AjBv9/11/

Just Replaced :
$('.galleryrow gallerywrapper').each(function() {
To
$('.galleryrow').each(function() {

Hope it works .
Meeran03
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rajar AhmedConsultantCommented:
Please this check url:
http://jsfiddle.net/AjBv9/11/
0
SiobhanElaraAuthor Commented:
You're a lifesaver... thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.