Question

I’m trying to have an image gallery where a caption is vertically centered inside of a slideshow, here’s the code I’m working with

$(window).load(function() {

    var imageHeight = $('.flexslider .slides li img').height();

    var captionTop = imageHeight - $('.title-cap').height();
    var captionTop = captionTop/2;
    $('.title-cap').css('top',captionTop + 'px');

    var captionTopOne = imageHeight - $('.sub-cap-one').height();
    var captionTopOne = captionTopOne/2;
    $('.sub-cap-one').css('top',captionTopOne + 'px');

    var captionTopTwo = imageHeight - $('.sub-cap-two').height();
    var captionTopTwo = captionTopTwo/2;
    $('.sub-cap-two').css('top',captionTopTwo + 'px');

    var captionTopThr = imageHeight - $('.sub-cap-three').height();
    var captionTopThr = captionTopThr/2;
    $('.sub-cap-three').css('top',captionTopThr + 'px');

});

The caption is positioned absolutely, and I’m using top to do the centering…

So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.

The first instance is working, with “title-cap”, but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.

Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.

Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now

function setContent(){
   [Added all of the above minus the onload part in here]
}
$(window).load(function() {
   setContent();
});
$(window).resize(function() {
   setContent();
});

Now just not sure why the sub-cap’s aren’t loading properly. Any ideas?

Answer 1

I’ve had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.