Создание кнопки «Нравится» на Tumblr с помощью Бесконечного свитка (версия 3 от Dave DeSandro) - PullRequest
Новая
       19

Создание кнопки «Нравится» на Tumblr с помощью Бесконечного свитка (версия 3 от Dave DeSandro)

0 голосов
/ 26 января 2019

Я понимаю, что на этот вопрос задавали и отвечали много раз, но я все еще не могу заставить работать мою тему (используя Masonry + Infinite Scroll) из-за недостатка знаний JavaScript .... Кнопка Like не активна для тех сообщений, загруженных с помощью Infinite Scroll Я чувствую, что 20789608 (обновленный ответ 5 марта 2014 г.) довольно близок к тому, что мне нужно, но все еще не может заставить мою работу (не знаю, как правильно включить / применить). Вот мои коды (только соответствующая часть).

JS 

<script type="text/javascript">
jQuery(function($){
// with masonry & jQuery
// init masonry
var $grid = $('.grid').masonry({
// masonry options
    itemSelector: '.grid-item',
    columnWidth: 400,
    gutter: 20,
    fitWidth: true,
});

// get masonry instance
var msnry = $grid.data('masonry');

// layout masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

{block:IfInfiniteScroll}
// init infinite scroll
$grid.infiniteScroll({
// infinite scroll options
    path: '.pagination_next',
    append: '.for_infinite_scroll',
    outlayer: msnry,
    status: '.page-load-status',
});
{/block:IfInfiniteScroll}
});
</script>

HTML 

<div id="content" class="grid">
{block:Posts}
    <article class="{PostType}{block:PermalinkPage} {block:Date}not-{/block:Date}page{/block:PermalinkPage} {TagsAsClasses} for_infinite_scroll">
{block:Text}
    <div class="post grid-item">
        {block:Title}
        <h1><a href="{Permalink}">{Title}</a></h1>
        {/block:Title}
        <div>
        {Body}
        </div>
    </div><!-- .post grid-item -->
{/block:Text}

Буду очень признателен, если вы поможете мне решить эту проблему. Заранее спасибо!

1 Ответ

0 голосов
/ 27 января 2019

Похоже, я нашел решение.Замена кодов между {block: IfInfiniteScroll} и {/ block: IfInfiniteScroll} следующим образом работает.

{block:IfInfiniteScroll}
// init infinite scroll
$grid.infiniteScroll({
// infinite scroll options
    path: '.pagination_next',
    append: '.for_infinite_scroll',
    outlayer: msnry,
    status: '.page-load-status',
});
// making like buttons work using infinite scroll
$grid.on('append.infiniteScroll',function(e,r,p,items){
    var $newElems = $(items);
    var $newElemsIDs = $newElems.map(function(){
        return this.id;
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
});
{/block:IfInfiniteScroll}
...