jQuery Masonry desplazamiento infinito y problemas de superposición de imagen con mi tema de tumblr

Question

Soy nuevo en programación (javascript) pero he investigado bastante en los últimos días para que mi tema tumblr funcione correctamente. Sé que mi pregunta es común, pero parece que no tengo suficiente conocimiento para integrar correctamente las partes del código que se dieron en muchos ejemplos similares.

My theme se supone que debe anular la limitación de "15 publicaciones por página" de tumblr y con una opción de "desplazamiento continuo" debe poner todas mis publicaciones (todas ellas fotos) en una página sin fin. Bueno, no es así. Con un poco de ayuda de here, logré envolver mi {block: Posts} con el y con un par de cambios aleatorios en la llamada de mampostería() Terminé con this

Como puedes ver mis imágenes no se superponen (¡por fin!) pero después de las 15 primeras publicaciones parece que se creó una nueva página y las últimas imágenes no están alineadas correctamente.

mi código de mampostería jQuery es la siguiente:

<script type="text/javascript"> 

$(window).load(function() { 
$('.autopagerize_page_element').masonry(), 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".autopagerize_page_element", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 

que sé, es un lío ... realmente agradecería un poco de ayuda.

Answer 1

No estoy acostumbrado a trabajar con Tumblr, pero puedo lo que está sucediendo:

Line 110:

Este script es crear un div contenedor alrededor de las entradas cada vez que llame a la albañilería, debido a la script, cada carga se ve como una página nueva, creo que simplemente puede eliminarla.

Algunos consejos: No tiene que esperar $ (ventanas) .load para ejecutar albañilería, cambiarlo por $ (function()

Para evitar el uso de imagen appened método de mampostería de superposición y imagesLoad: Refer this

veo que está utilizando mampostería 1.0.1, asegúrese de que está utilizando mampostería última versión (2.1.06)

código Ejemplo:

$(function() { 
    //$('.autopagerize_page_element').masonry(); 
    var $container = $('.autopagerize_page_element'); 
    //wait until images are loaded 
    $container.imagesLoaded(function(){ 
     $container.masonry({itemSelector: '.entry'}); 
    }); 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".entry", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
    } 
); 
}); 

y asegúrese de quitar el último guión en este bloque de cabecera:

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
    <script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version --> 
    <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> 
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>--> 

creo que sirve