[Share] Gallery Grid Number Pagination

Description: Show number pagination under Gallery Grid

• Demo: https://tuanphan-demo01.squarespace.com/gallery-pagination-v1?noredirect
• Pass: abc

If code doesn't work on your site, you can share site url, I will check again.

#1. Use this code to Page Header Injection (Page where you use Gallery Grid)

<div class="pagination"></div>
<style>
.pagination {
    margin-top: 20px;
}
.pagination span {
    cursor: pointer;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #ccc;
}
.pagination span.active {
    background-color: #007bff;
    color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.pagination').insertAfter('.gallery-grid-wrapper');
    const itemsPerPage = 18; 
    const totalItems = $('.gallery-grid-item').length; 
    const totalPages = Math.ceil(totalItems / itemsPerPage); 
    
    $('.gallery-grid-item').hide().slice(0, itemsPerPage).show();
   
    for (let i = 0; i < totalPages; i++) {
        $('.pagination').append(`<span class="page">${i + 1}</span>`);
    }
   
    $('.pagination').on('click', '.page', function() {
        const pageIndex = $(this).text() - 1; 
       
        $('.gallery-grid-item').hide();
       
        const start = pageIndex * itemsPerPage;
        const end = start + itemsPerPage;
       
        $('.gallery-grid-item').slice(start, end).show();
       
        $('.page').removeClass('active');
        $(this).addClass('active');
    });
    
    $('.pagination .page').first().click();
});
</script>

#2. You can change number of items/page here

#3. You can change color, border,… here