Strange issue with Masonry and infinite-scroll
Hi!
I'm trying to configure both masonry and infinite scroll on my wordpress theme.
The page I'm working on is this: http://www.photocracy.eu/
If I scroll the page the new images are loaded, but they are displayed in a very strange way, like a mess!
I can't see any relevant error from firebug, but I think it is a callback problem.
I use this code:
- var $ = jQuery;
- var $container = $('#sort');
- $container.infinitescroll({
- navSelector : "#nav-below",
- // selector for the paged navigation (it will be hidden)
- nextSelector : "#nav-below .nav-previous a",
- // selector for the NEXT link (to page 2)
- itemSelector : "#sort .box",
- // selector for all items you'll retrieve
- contentSelector : "#sort",
- loading: {
- img : "",
- finishedMsg : "",
- msgText: "",
- speed: 'slow',
- },
- },function( newElements ){
- jQuery("a[rel*=lightbox]").colorbox({maxHeight:"100%",opacity:0.8,slideshow:true,slideshowAuto:false,slideshowSpeed:2500,slideshowStart:"start",slideshowStop:"stop"});
- var $newElems = $( newElements );
- $newElems.css('position', 'absolute');
- $container.masonry( 'appended', $newElems );
- });
The strange thing is that if I try to resize the page all the images move in the correct position!
I'm going crazy!
Can you help me?