Question

I am creating a news page and the article is sitting over an image in an overlay box. I have multiple news items bring printed on a page which are working with a scoller.

The bit i am interested in centering is the figcaption.

        <section>
            <h2>{title}</h2>
            <figure>
                <img src="{news_image}" alt="{title}" width="718" />
                <figcaption>
                    {article}
                    <a href="#close" class="btn-close">X</a>
                </figcaption>
            </figure>
        </section> 
        <section>
            <h2>{title}</h2>
            <figure>
                <img src="{news_image}" alt="{title}" width="718" />
                <figcaption>
                    {article}
                    <a href="#close" class="btn-close">X</a>
                </figcaption>
            </figure>
        </section> e.t.c

I want to get the height of each img within the figure as well as the height of each figcaption so that i can centre it perfectly over the image.

With one element i can imagine it being quite easy but the confusion for me is how to get Jquery to add the correct values for each.

Any ideas?

Answer 1

You should be able to do this simply by iterating over each section:

$('section').each(function(){
    var imgHeight = $(this).find('img').height();
    var captionHeight = $(this).find('figcaption').height();
    {position caption here}
});

That should allow you to grab the height of each image and each caption in each section.

jsFiddle here: http://jsfiddle.net/nQCUr/1/