Pagination on all pages
This commit is contained in:
parent
0b268b8654
commit
6f154234b3
@ -14,6 +14,9 @@
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<script src="plugins/pagination.min.js"></script>
|
||||
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
|
||||
<link rel="stylesheet" href="styles/pagination.css" media="screen">
|
||||
<script src="scripts/explorer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -192,7 +195,10 @@
|
||||
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
|
||||
<img class="style-select list" src="styles/icons/list.svg" alt="liste">
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
|
||||
<div class="gallery"></div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -390,10 +390,15 @@ jQuery(document).ready(function($)
|
||||
return false;
|
||||
}
|
||||
|
||||
// gallery vars
|
||||
var pageSize = 14;
|
||||
var paintingList = [];
|
||||
|
||||
function generateTable()
|
||||
{
|
||||
hasResult = false;
|
||||
numberOfItem = 0;
|
||||
canDisplay = true;
|
||||
|
||||
for (i of data)
|
||||
{
|
||||
@ -457,7 +462,15 @@ jQuery(document).ready(function($)
|
||||
$("table").append(result);
|
||||
|
||||
// gallery
|
||||
paintingHtml = '<div class="gallery-item">';
|
||||
paintingList.push(i.number);
|
||||
if (paintingList.length % (pageSize + 1) == 0)
|
||||
canDisplay = false;
|
||||
|
||||
paintingHtml = '<div class="gallery-item ';
|
||||
if (canDisplay)
|
||||
paintingHtml += 'active">';
|
||||
else
|
||||
paintingHtml += 'inactive">';
|
||||
if (i.photo == "none")
|
||||
{
|
||||
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
||||
@ -466,7 +479,7 @@ jQuery(document).ready(function($)
|
||||
else
|
||||
{
|
||||
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
|
||||
}
|
||||
paintingHtml += '<span class="item-title">' + i.title;
|
||||
if (i.year != '—')
|
||||
@ -478,9 +491,13 @@ jQuery(document).ready(function($)
|
||||
return hasResult;
|
||||
}
|
||||
|
||||
$(".gallery").hide();
|
||||
$("#gallery").hide();
|
||||
$(".style-select").hide();
|
||||
|
||||
var targetPage = 0;
|
||||
if (urlParams.get('page') != "")
|
||||
targetPage = urlParams.get('page');
|
||||
|
||||
generateMenu();
|
||||
var res = generateTable();
|
||||
|
||||
@ -490,6 +507,61 @@ jQuery(document).ready(function($)
|
||||
$("article.explorer h2").removeClass("active")
|
||||
$("form").slideUp(200);
|
||||
$("article.explorer p.result").css("display", "block");
|
||||
|
||||
|
||||
// pagination
|
||||
var currentPage = 0;
|
||||
var previousArray = []
|
||||
var options =
|
||||
{
|
||||
dataSource: paintingList,
|
||||
pageSize: pageSize,
|
||||
pageRange: 6,
|
||||
className: 'paginationjs-theme-ginou',
|
||||
callback: function (response, pagination)
|
||||
{
|
||||
currentPage = pagination.pageNumber;
|
||||
urlParams = new URLSearchParams(window.location.search)
|
||||
console.log(urlParams.get('page'));
|
||||
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);
|
||||
}
|
||||
|
||||
if (previousArray.length > 0)
|
||||
{
|
||||
for (i of previousArray)
|
||||
$('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
|
||||
}
|
||||
|
||||
previousArray = response;
|
||||
|
||||
$.each(response, function(index, item)
|
||||
{
|
||||
$('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
|
||||
|
||||
idx = item-1;
|
||||
if (item >= 1000)
|
||||
idx = item - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
|
||||
|
||||
if (data[idx].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);
|
||||
|
||||
if (targetPage > 0)
|
||||
$("#pagination").pagination('go', targetPage);
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -513,11 +585,11 @@ jQuery(document).ready(function($)
|
||||
$(".style-select.frame").click(function()
|
||||
{
|
||||
$("table").hide();
|
||||
$(".gallery").show();
|
||||
$("#gallery").show();
|
||||
})
|
||||
$(".style-select.list").click(function()
|
||||
{
|
||||
$(".gallery").hide();
|
||||
$("#gallery").hide();
|
||||
$("table").show();
|
||||
})
|
||||
|
||||
@ -562,6 +634,22 @@ jQuery(document).ready(function($)
|
||||
}
|
||||
|
||||
return generateCartel();
|
||||
},
|
||||
|
||||
beforeShow : function(instance, current)
|
||||
{
|
||||
if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
|
||||
$('#pagination').pagination('next');
|
||||
|
||||
if (current.opts.fancyboxIndex < previousArray[0])
|
||||
$('#pagination').pagination('previous');
|
||||
},
|
||||
|
||||
afterClose : function(instance)
|
||||
{
|
||||
// after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
|
||||
// (apparently fancybox changes back to the original url it had when starting)
|
||||
//window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,7 +18,7 @@ jQuery(document).ready(function($)
|
||||
if (canDisplay)
|
||||
{
|
||||
paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user