Javascript set a variable that changes on each child item

Question

This may seem like an easily answered question but it's one I've been struggling for a little while.

Let me first explain what I'm trying to achieve.

I have a gallery of images and I want each of the images to centered vertically inside their container. The images are of varying shapes, sizes and aspect ratios so my code needs to be variable for each image therein. Here is what I have so far:

<div id="cbp-fwslider" class="cbp-fwslider">
    <img src="images/large/1.jpg" alt="img01"/>
    <img src="images/large/2.jpg" alt="img02"/>
    <img src="images/large/3.jpg" alt="img03"/>
</div>

And here is my javascript:

var $img = $('div#cbp-fwslider img');
var ih = $img.height();
var $div = $('div#cbp-fwslider');
var dh = $div.height();
if (dh > ih) {
    var dif = (dh - ih);
    $img.css('margin-top', + dif / 2 + "px");
}

Now, this works in part. What it does is calculates the correct "margin-top" to vertically center the first image within the container but then applies it to all involved. I have no doubt that this is because I have set the javascript to set the "margin-top" as the same for all the images.

My question is, how do I set a variable to make it so it does this separately for all the items that I put in my gallery?

Forgive me if this is a basic question that I could have found the answer for elsewhere, I am pretty wet behind the ears when it comes to javascript.

Also if anybody knows of an easier/more efficient way of achieving what I want then it would be great if you could point me in the right direction.

I must advise that the container has a dynamic height and so do all images. With the nature of how the gallery works, I can't use absolute positioning and THIS technique doesn't seem to work either.

Thanks in advance for any help.

What browsers are you targeting? I started using flex boxes for this kind of stuff [caniuse flexbox](http://caniuse.com/flexbox). — Dänu, Apr 21 '14 at 15:07
Are you placing the images one after the other into the container or do several images appear within the container at the same time? — jing3142, Apr 21 '14 at 15:16
@jing3142 One after another, it is a slider gallery, so the images slide in and out of the gallery. When they do so, I want them to be vertically aligned. That's the plan. — Les Connelly, Apr 21 '14 at 15:18

score 2 · Accepted Answer · answered Apr 21 '14 at 15:17

2

You'll want to run your code individually on each image rather than on the collection of images. You can do this by using each to loop through the collection:

$('div#cbp-fwslider img').each(function(){
    var $img = $(this);
    var ih = $img.height();
    var $div = $('div#cbp-fwslider');
    var dh = $div.height();
    if (dh > ih) {
        var dif = (dh - ih);
        $img.css('margin-top', + dif / 2 + "px");
    }
});

answered Apr 21 '14 at 15:17

James Montagne

77,516
14
110
130

Thank you very much James. You're a hero. :) – Les Connelly Apr 21 '14 at 16:56

score 1 · Answer 2 · answered Apr 21 '14 at 15:23

1

You can just use css to vertically align all images to center.

<div id="cbp-fwslider" class="cbp-fwslider">
    <img src="images/large/1.jpg" alt="img01"/>
    <img src="images/large/2.jpg" alt="img02"/>
    <img src="images/large/3.jpg" alt="img03"/>
</div>

css

img {
    vertical-align: middle;
}

see http://jsfiddle.net/vishnurajv/xR28t/

answered Apr 21 '14 at 15:23

Vishnuraj V

2,819
3
19
23

I am using this gallery: http://tympanus.net/codrops/2013/02/26/full-width-image-slider/ and this handy bit off CSS doesn't seem to work with this. – Les Connelly Apr 21 '14 at 15:38

score 0 · Answer 3 · answered Apr 21 '14 at 15:18

Try to find the maximum height of img in your div, after that set margin-top for all of other img. This is my idea, you or someone can do better.

var maxHeight = 0;
$('div#cbp-fwslider img').each(function(){
  if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('div#cbp-fwslider img').each(function(){
  $(this).css('margin-top', Number(maxHeight - $(this).height()) / 2 + 'px');
});

Hope help!

Javascript set a variable that changes on each child item

3 Answers3