jQuery Masonry scroll infinito e problemi di sovrapposizione di immagini con il mio tema tumblr

Question

Sono nuovo nella programmazione (javascript) ma negli ultimi giorni ho svolto una ricerca piuttosto approfondita per far funzionare correttamente il mio tema tumblr. So che la mia domanda è comune ma, a quanto pare, non ho abbastanza conoscenze per integrare correttamente parti di codice che sono state fornite in molti esempi simili.

My theme si suppone che sovrascriva il limite di "15 post per pagina" di tumblr e con un'opzione di "scorrimento infinito" dovrebbe mettere tutti i miei post (tutte le immagini) in una pagina senza fine. Bene, non è così. Con un piccolo aiuto da here, sono riuscito a avvolgere la mia {block: Messaggi} con l'e con un paio di cambiamenti casuali nella muratura() chiamata ho finito con this

Come si può vedere le mie foto non sono sovrapposte (finalmente!) ma dopo i primi 15 post sembra che venga creata una nuova pagina e che le ultime immagini non siano allineate correttamente.

mio codice jQuery muratura è questo:

<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> 

Lo so, è un casino ... realmente apprezzerei un certo aiuto.

Answer 1

io non sono abituato a lavorare con Tumblr, ma posso quello che sta succedendo:

Line 110:

Questo script è la creazione di un div wrapper per le voci ogni volta che si chiama in muratura, a causa della script, ogni carico sembra una nuova pagina, penso che puoi semplicemente rimuoverlo.

Alcuni consigli: Non dovete aspettare $ (finestre) .load per eseguire murature, modificarlo $ (function()

per evitare la loro uso appened metodo muratura sovrapposizioni e imagesLoad: Refer this

vedo che stai utilizzando in muratura 1.0.1, essere sicuri che si sta utilizzando in muratura ultima versione (2.1.06)

codice Esempio:

$(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); 
     }); 
    } 
); 
}); 

e assicurarsi di rimuovere l'ultimo script in questo blocco di intestazione:

<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>--> 

Speranza che aiuta