我不能在Isotope js

Question

我想在同位素JS中实现分页，我试过这个：

在这段代码中它可以正常工作，但我每页的图片数量不多...... 我正在关注本教程https://tannermoushey.com/2012/12/isotope-paging/ 我正在使用Wordpress和ACF，为什么我必须像这样调用我的图像。

<?php

$page_num = 1; // starting page number
$items_per_page = 1; // how many posts per page?


echo '<section id="pins" class="content-posts isotope">';
$images = get_field('galerie');
foreach ($images as $i => $image):;

    $class = '';
    $classSize = '';
    if ($i % 2) {
        $class = 'grid-item--height';
        $classSize = 'gallery-height-1';
    } elseif ($i % 3) {
        $class = 'grid-item--height2';
        $classSize = 'gallery-height-2';
    } else {
        $class = 'grid-item--height3';
        $classSize = 'gallery-height-3';
    }




    //next page
    echo '<article class="goto-page next post isotope-item" page="' . ($page_num - 1) . '">' . //show on previous page
        '<a href="#" class="page" page="article.post[page~=' . ($page_num) . ']">' . //point to this page
        '<span>Next page</span></a>' .
        '<div class="grid-item ' . $class . '">
                  <img src="' . $image['sizes'][$classSize] . ' " alt=" ' . $image['alt'] . '"">
              </div>' .
        '</article>';


    //previous page
    echo '<article class="goto-page previous post isotope-item" page="' . $page_num . '">' . //show on previous page
        '<a href="#" class="page" page="article.post[page~=' . ($page_num - 1) . ']">' . //point to this page
        '<span>Previous pages</span></a></article>';

    $page_num++; // increase the page number
    $i++;



endforeach;



echo '</section>';

?>

这是我的教程中的jquery同位素

$('.grid').isotope({
    itemSelector: '.grid-item',
    masonry: {
        columnWidth: 100,
        gutter: 20,
        isFitWidth: true
    }
});


(function ($) {
    var container = $('section.content-posts');

    container.isotope( { itemSelector : 'article.post' } ); // specify container

    container.isotope( { filter : "article.post[page~='1']" } ); // starting filter

    $('article.goto-page a').click(function(){
        var selector = $(this).attr('page'); // make selector equal to the value we put in 'page'

        container.isotope( { filter : selector });
        return false;
    })
} )(jQuery);