我希望为我的同位素网格 (https://isotope.metafizzy.co/layout-modes.html) 添加分页。我已经开始根据其他一些研究/我自己的知识将一些代码放在一起,但它似乎并没有打球。控制台中没有错误,但我知道这可能很明显。包含以下代码:
JS
jQuery(function ($) {
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
percentPosition: true,
masonry: {
// tell the layout to use the items we set up as sizing templates:
columnWidth: '.item-sizer',
gutter: '.gutter-sizer'
}
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
jQuery(function ($) {
var itemSelector = ".item";
var $container = $('#isotope-list').isotope({ itemSelector: itemSelector });
var itemsPerPageDefault = 4;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.isotope(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function (i, elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.isotope(filterValue).each(function(){
// increment page if a new one is needed
if( item > itemsPerPage ) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length-1];
// last class shorter than 4 will be a page number, if so, grab and replace
if(lastClass.length < 4){
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number, add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll(){
$checkboxes.each(function (i, elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
});
和 HTML:
<section class="discover-grid">
<?php $the_query = new WP_Query( 'posts_per_page=4' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<div class="item-sizer"></div>
<div class="gutter-sizer"></div>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );
$heading = get_field( 'post_heading', $post_id );
$subheading = get_field( 'post_subheading', $post_id );
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item" style="background: url('<?php the_post_thumbnail_url(); ?>')">
<a href="<?php the_permalink(); ?>">
<div class="overlay">
<div class="inner-overlay">
<div class="overlay-text-wrapper">
<div class="top-title"><?php echo esc_html( $heading ); ?></div>
<div class="bottom-title"><?php echo esc_html( $subheading ); ?></div>
</div>
</div>
</div>
</a>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>
</section>
任何帮助将不胜感激!