Problems with Freemasonry / Dynamic Slideshows

Question

I am a little confused by the following steps to take on the project I'm working on, and hopefully you could give me some ideas / help.

http://goo.gl/4d72h

I use Wordpress and a combination of Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) and Freemasonry (http://masonry.desandro.com/index.html) to create a landing page of this project.

As you can see, visiting the site, each "post" is wrapped in float grid_6, allowing two floats per line, and then I use masonry to put everything together as it happens. I wrapped the masonry code in the (window) .load function to wait until all the downloaded images are loaded, and then the masonry starts. Pretty simple.

<script> $(window).load(function(){ var $container = $('.masonry-cont-area'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.single-fg-post' }); }); }); </script> 

However, the masonry only takes into account the first image of the function for its positioning, etc. If you click on images or dots, it will advance to the next image, which may be longer or shorter in height, causing several problems. Since the masonry has already taken place, it is superimposed on the next post, etc. You can see what I mean when you click on the images from the link above.

So, what am I after today, have any ideas on how this can be fixed? Can masonry take height from the tallest image in a slide show? Can it change dynamically when clicking on images? Can I make sure that the edge below is ALWAYS given in absolute positions?

Any ideas would be really appreciated.

Thanks to everyone, Richard

Answer 1

The slideshow plugin does not seem to display any event hooks. So you have to do it verbatim.

Change the code in which you initialize the masonry plugin to

 $(window).load(function(){ var $container = $('.masonry-cont-area'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.single-fg-post', isAnimated: true // added this line to make the resizing of the masonry animated and not instant.. }); // whenever we click on a bullet element $('.pager').on('click','.bullet', function(){ // we use timeout to delay the redrawing of masonry // because the slideshow takes sometime to fade out the current slide // and slide in the new one.. // We have to wait until the slideshow has completed its transition before // redrawing masonry, so that the masonry plugin can use the new slide dimensions.. setTimeout(function(){ // we make masonry recalculate the element based on their current state. $container.masonry(); }, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw.. }); }); }); 

Take a look at live at http://jsfiddle.net/XjVWN/embedded/result/

Answer 2

One thing you can do is call .masonry('reload') when changing the image.