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

139
scripts/exposition.js
View File

@ -2,56 +2,121 @@ 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 + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
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);
}
}
$('[data-fancybox="exposition"]').fancybox(
/*var targetPage = 0;
urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');*/
var previousArray = []
var options =
{
infobar: false,
toolbar: true,
smallBtn: false,
buttons: ["arrowLeft", "arrowRight", "close"],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
mobile: {
preventCaptionOverlap: true,
},
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);
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
function generateCartel()
if (previousArray.length > 0)
{
cartel = '<div id="info"><span class="info">';
cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
if (data[idx].month != '—')
cartel += data[idx].month + '&nbsp;';
if (data[idx].year != '—')
cartel += data[idx].year;
cartel += '</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
if (data[idx].dimension != '—')
cartel += ' (' + data[idx].dimension + ')';
cartel += '</span>';
if (data[idx].comment != '—')
cartel += '<span class="comment">' + data[idx].comment + '</span>';
cartel += '</div>';
return cartel;
for (i of previousArray)
$('[data-fancybox-index="'+i+'"]').removeClass("active").addClass("inactive");
}
return generateCartel();
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,
buttons: ["arrowLeft", "arrowRight", "close"],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
mobile: {
preventCaptionOverlap: true,
},
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
function generateCartel()
{
cartel = '<div id="info"><span class="info">';
cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
if (data[idx].month != '—')
cartel += data[idx].month + '&nbsp;';
if (data[idx].year != '—')
cartel += data[idx].year;
cartel += '</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
if (data[idx].dimension != '—')
cartel += ' (' + data[idx].dimension + ')';
cartel += '</span>';
if (data[idx].comment != '—')
cartel += '<span class="comment">' + data[idx].comment + '</span>';
cartel += '</div>';
return cartel;
}
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;