passo-html:

união dos photosets + rolagem infinita ajax

post original by @shythemes

importante frisar que praticamente só irei traduzir, pois ela(e) já explicou muito bem.

Antes de tudo salve o código do seu tema. Para ir testando seus JS depois.

Primeiro apague todos Jquary/JS do seu theme.

1.Coloque esses Scripts antes de </head>: 

<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/auyouzq5m/jquery.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/qfAovx3no/min.js"></script>
<!-- pxu by shythemes / explicado por passo-html --->
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

---

2.Cole isso antes de </style>: 

#infscr-loading {display:none!important;}
#infscr-loading img {display:none;}
#pagination {display:none;}

---

3.Cole isso antes de </body>:
https://pastebin.com/raw/3DPLbb72

---

4. Troque seu {block:Photoset} por esse:

{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{/block:Photoset}

1.obs: mudem todos #content ou $content  para a div  que vem antes de {block:Posts}

2.obs: mudem todos .post  para a div  que vemdepois de {block:Posts}

Exemplo, assim:

<div id=“content ”>
{block:Posts}
<div class=“post”>

content é para o que vem antes de {block:Posts}
post  para o que vem depois de {block:Posts}

---

querem mais tutoriais traduzidos? deem sugestões e peçam na ask.

se gostou dê like no post e reblogue para os br conhecerem nosso trabalho.

creditem a shythemes.

[ dai ]

união dos photosets + rolagem infinita ajax

post original by @shythemes

importante frisar que praticamente só irei traduzir, pois ela(e) já explicou muito bem.

Antes de tudo salve o código do seu tema. Para ir testando seus JS depois.

Primeiro apague todos Jquary/JS do seu theme.

1.Coloque esses Scripts antes de </head>: 

<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/auyouzq5m/jquery.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/qfAovx3no/min.js"></script>
<!-- pxu by shythemes / explicado por passo-html --->
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

2.Cole isso antes de </style>: 

#infscr-loading {display:none!important;}
#infscr-loading img {display:none;}
#pagination {display:none;}

3.Cole isso antes de </body>:
https://pastebin.com/raw/3DPLbb72

4. Troque seu {block:Photoset} por esse:

{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{/block:Photoset}

1.obs: mudem todos #content ou $content  para a div  que vem antes de {block:Posts}

2.obs: mudem todos .post  para a div  que vemdepois de {block:Posts}

Exemplo, assim:

<div id=“content ”>
{block:Posts}
<div class=“post”>

content é para o que vem antes de {block:Posts}
post  para o que vem depois de {block:Posts}

querem mais tutoriais traduzidos? deem sugestões e peçam na ask.

se gostou dê like no post e reblogue para os br conhecerem nosso trabalho.

creditem a shythemes.

[ dai ]

rolagem infinita .masonryWrap

1.Primeiro coloque esses scripts antes de </head>:x

<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/auyouzq5m/jquery.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/kecu8nj/uGBow50r6/info.js"></script>

2.Cole isso antes de </style>: 

#infscr-loading {display:none!important;}
#infscr-loading img {display:none;}
#pagination {display:none;}

3.Cole isso antes de </body>:
https://pastebin.com/raw/SSyS6cVw

4. Cole isso logo após a div quem vem depois de {/block:Posts}  
assim:

<div class="loading"></div>

OBS: vocês vão ter de mudar no 3 código tudo o que estiver escrito “#content” e “.post” para as div que aparecem antes do {block:Posts} e depois do {block:Posts} no theme de vocês:

Exemplo, assim:

<div id=“content ”>
{block:Posts}
<div class=“post”>

A div que estiver antes de {block:Posts} vocês escrevem lá no último código onde estiver escrito $(’#content’) e a que vem depois de {block:Posts} vocês escrevem lá onde está  itemSelector : “.post, (…)”

É meio complicadinho, mas espero que tenham entendido, qualquer dúvida só perguntar!

Creditem pelo menos no HTML!

[dai]