keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

First working prototype for pagination

Browse Source
This commit is contained in:
Théo Marchal 2021-02-13 20:49:20 +01:00
parent ede8ac1bcb
commit d23cd1fd9b
5 changed files with 131 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
exposition.html
View File

@ -13,6 +13,8 @@
<script src="scripts/menu.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">
<script src="scripts/exposition.js"></script>
</head>
<body>
@ -38,6 +40,7 @@
<article class="exposition">
<h1>Exposition</h1>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
<div class="gallery"></div>
</article>
</body>

1
plugins/pagination.css Normal file
View File

File diff suppressed because one or more lines are too long

11
plugins/pagination.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

69
scripts/exposition.js
View File

@ -2,18 +2,73 @@ jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
var paintingList = [];
canDisplay = true;
for (i of data)
{
if (i.photo == "ok" || i.photo == "good")
{
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingList.push(i.number);
if (paintingList.length % (14 + 1) == 0)
canDisplay = false;
if (canDisplay)
{
paintingHtml = '<a class="active" 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>';
}
else
{
paintingHtml = '<a class="inactive" data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
}
$(".gallery").append(paintingHtml);
}
}
/*var targetPage = 0;
urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');*/
var previousArray = []
var options =
{
dataSource: paintingList,
pageSize: 14,
//pageRange: null,
callback: function (response, pagination)
{
//window.history.pushState('', '', '/exposition-pagination.html?page=' + pagination.pageNumber); // careful, back button is broken with that
//window.console && console.log(response, pagination);
if (previousArray.length > 0)
{
for (i of previousArray)
$('[data-fancybox-index="'+i+'"]').removeClass("active").addClass("inactive");
}
previousArray = response;
$.each(response, function(index, item)
{
$('[data-fancybox-index="'+item+'"]').removeClass("inactive").addClass("active");
$('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
});
}
};
$('#pagination').pagination(options);
/*if (targetPage > 0)
$("#pagination").pagination('go', targetPage);*/
$('[data-fancybox="exposition"]').fancybox(
{
selector: '.gallery a',
infobar: false,
toolbar: true,
smallBtn: false,
@ -51,7 +106,17 @@ 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');
},
});
});
});

14
styles/main.css
View File

@ -203,6 +203,20 @@ article.main p.signature {
/* Exposition */
article #pagination {
display:table;
text-align:center;
margin:auto;
}
article .gallery a.active {
display:initial;
}
article .gallery a.inactive {
display:none;
}
article .gallery {
display:inline-block;
position:relative;