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="http://static.tumblr.com/kecu8nj/auyouzq5m/jquery.js"></script> <script type="text/javascript" src="http://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 ]