Masonry/Dynamic Slideshow Height Issues


Staff member
I'm a little confused with the next steps to take on a project I'm working on and hopefully you could give me some ideas/help.

<a href="" rel="nofollow"></a>

I'm using Wordpress, and a combination of Portfolio Slideshow Pro ( and Masonry ( to create the landing page of this project.

As you can see by visiting the site, each 'post' is wrapped in a grid_6 float, allowing two floats per row, and then I am using masonry to place everything together as it does. I've wrapped the masonry code in a (window).load function to wait until all the featured images have loaded and then it starts the masonry. Pretty straightforward.

    var $container = $('.masonry-cont-area');

    $container.imagesLoaded( function(){
        itemSelector : '.single-fg-post'

However, the masonry is only taking into consideration the first feature image for it's positioning etc. If you click the images, or the dots, it'll advance to the next image which can be longer or shorter in height, which is causing a few problems. Because the masonry has already taken place, it's overlaping with the next post etc. You can see what I mean when you click on the images on the link given above.

So, what I'm after today, is any ideas on how this can be fixed? Can masonry take the height from the tallest image in the slideshow? Can it changes dynamically as the images are clicked? Can I make sure that a margin at the bottom is ALWAYS given on absolute positioned items?

Any ideas would be really appreciated.

Thanks all,