function paginationInit(data, paintingList, explorer) { function getPageRange() { if (window.innerWidth >= 600) return explorer ? 6 : null; else if (window.innerWidth < 600 && window.innerWidth > 450) return 4; else return 1; } var options = { dataSource: paintingList, pageSize: pageSize, pageRange: getPageRange(), className: 'paginationjs-theme-ginou', hideWhenLessThanOnePage: true, callback: function (response, pagination) { currentPage = pagination.pageNumber; // url handling if (explorer) { urlParams = new URLSearchParams(window.location.search) if (urlParams.get('page') == undefined) { window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash); } else { trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&')); window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash); } } else { window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash); } if (previousArray.length > 0) { for (i of previousArray) $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive"); } previousArray = response; infoArray = [] for (a of response) { for (d of data) { if (a == d.number) infoArray.push({"number": d.number, "photo": d.photo}); } } $.each(response, function(index, item) { for (i of infoArray) { if (i.number == item) { $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active"); if (i.photo != "none") $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "photos/paintings/mini/" + item + ".jpg"); else $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "images/unknown.jpg"); } } }); } }; $('#pagination').pagination(options); }