First working prototype for pagination
This commit is contained in:
parent
ede8ac1bcb
commit
d23cd1fd9b
@ -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
1
plugins/pagination.css
Normal file
File diff suppressed because one or more lines are too long
11
plugins/pagination.min.js
vendored
Normal file
11
plugins/pagination.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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,
|
||||
},
|
||||
|
||||
caption: function(instance, item)
|
||||
dataSource: paintingList,
|
||||
pageSize: 14,
|
||||
//pageRange: null,
|
||||
callback: function (response, pagination)
|
||||
{
|
||||
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
|
||||
//window.history.pushState('', '', '/exposition-pagination.html?page=' + pagination.pageNumber); // careful, back button is broken with that
|
||||
//window.console && console.log(response, pagination);
|
||||
|
||||
function generateCartel()
|
||||
if (previousArray.length > 0)
|
||||
{
|
||||
cartel = '<div id="info"><span class="info">';
|
||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
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 + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
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');
|
||||
},
|
||||
|
||||
});
|
||||
});
|
||||
});
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user