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

Compare commits

base: keb:04d3e099cb067d3e5852610ff9acfd25e18aed12
Branches Tags
keb:dev
keb:other-works
keb:v1
...
compare: keb:bfbb959cf89d4711f05e7f1f3b9f52ddaa8203f3
Branches Tags
keb:dev
keb:other-works
keb:v1

9 Commits
04d3e099cb ... bfbb959cf8

Author SHA1 Message Date
Théo Marchal
bfbb959cf8 New fix for small screen pagination 2021-02-14 12:42:57 +01:00
Théo Marchal
0c653e2692 Mobile compatibility fix for small screens 2021-02-14 12:39:56 +01:00
Théo Marchal
e7107c20b9 Mobile compatibility for pagination 2021-02-14 12:38:46 +01:00
Théo Marchal
6f154234b3 Pagination on all pages 2021-02-14 12:24:53 +01:00
Théo Marchal
0b268b8654 Pagination design 2021-02-14 11:17:16 +01:00
Théo Marchal
708d4de228 Fix for page number with fancybox 
It is far from perfect. Should be investigated by reading fancybox code if there's a better way later on
 2021-02-14 10:32:39 +01:00
Théo Marchal
3469704e1b Pagination page number working without fancybox hash 
Also legal update
 2021-02-14 01:55:42 +01:00
Théo Marchal
649be52829 Merge branch 'dev' into pagination 2021-02-14 01:33:02 +01:00
Théo Marchal
d23cd1fd9b First working prototype for pagination 2021-02-13 20:49:20 +01:00
10 changed files with 292 additions and 45 deletions
Show Stats Expand all files Collapse all files

1
README.md
View File

@ -18,6 +18,7 @@ Tools used:
* [jQuery](https://jquery.com/) * [jQuery](https://jquery.com/)
* [fancybox 3](https://fancyapps.com/fancybox/3/) * [fancybox 3](https://fancyapps.com/fancybox/3/)
* [Chart.js](https://www.chartjs.org/) * [Chart.js](https://www.chartjs.org/)
* [Pagination.js](https://pagination.js.org/)
Fonts used: Fonts used:
* [Rubik](https://github.com/googlefonts/Rubik) * [Rubik](https://github.com/googlefonts/Rubik)

8
explorer.html
View File

@ -14,6 +14,9 @@
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script> <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> <script src="scripts/explorer.js"></script>
</head> </head>
<body> <body>
@ -192,7 +195,10 @@
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie"> <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
<img class="style-select list" src="styles/icons/list.svg" alt="liste"> <img class="style-select list" src="styles/icons/list.svg" alt="liste">
</div> </div>
<div class="gallery"></div> <div id="gallery">
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
<div class="gallery"></div>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>

6
exposition.html
View File

@ -9,10 +9,13 @@
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<link rel="stylesheet" href="styles/fancybox.css" media="screen"> <link rel="stylesheet" href="styles/fancybox.css" media="screen">
<link rel="stylesheet" href="styles/pagination.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script> <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> <script src="scripts/exposition.js"></script>
</head> </head>
<body> <body>
@ -37,7 +40,8 @@
<article class="exposition"> <article class="exposition">
<h1>Exposition</h1> <h1>Exposition</h1>
<p class="center" style="margin-bottom:0;">Cliquez sur un tableau pour le voir en grand avec ses détails.</p> <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> <div class="gallery"></div>
</article> </article>
</body> </body>

2
informations.html
View File

@ -54,7 +54,7 @@
<p>Cette page regroupe diverses photos et informations&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'exposition, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu intéressant, notamment pour les coupures de presse.</p> <p>Cette page regroupe diverses photos et informations&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'exposition, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu intéressant, notamment pour les coupures de presse.</p>
<h2>Informations technique</h2> <h2>Informations technique</h2>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que du plugin <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a> et <a href="https://www.chartjs.org/">Chart.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p> <p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p> <p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>

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

108
scripts/explorer.js
View File

@ -390,10 +390,15 @@ jQuery(document).ready(function($)
return false; return false;
} }
// gallery vars
var pageSize = 14;
var paintingList = [];
function generateTable() function generateTable()
{ {
hasResult = false; hasResult = false;
numberOfItem = 0; numberOfItem = 0;
canDisplay = true;
for (i of data) for (i of data)
{ {
@ -457,7 +462,15 @@ jQuery(document).ready(function($)
$("table").append(result); $("table").append(result);
// gallery // 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") if (i.photo == "none")
{ {
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
@ -466,7 +479,7 @@ jQuery(document).ready(function($)
else else
{ {
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' 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; paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—') if (i.year != '—')
@ -478,9 +491,13 @@ jQuery(document).ready(function($)
return hasResult; return hasResult;
} }
$(".gallery").hide(); $("#gallery").hide();
$(".style-select").hide(); $(".style-select").hide();
var targetPage = 0;
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');
generateMenu(); generateMenu();
var res = generateTable(); var res = generateTable();
@ -490,6 +507,71 @@ jQuery(document).ready(function($)
$("article.explorer h2").removeClass("active") $("article.explorer h2").removeClass("active")
$("form").slideUp(200); $("form").slideUp(200);
$("article.explorer p.result").css("display", "block"); $("article.explorer p.result").css("display", "block");
// pagination
function getPageRange()
{
if (window.innerWidth >= 600)
return 6;
else if (window.innerWidth < 600 && window.innerWidth > 450)
return 4;
else
return 1;
}
var currentPage = 0;
var previousArray = []
var options =
{
dataSource: paintingList,
pageSize: pageSize,
pageRange: getPageRange(),
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 else
{ {
@ -513,11 +595,11 @@ jQuery(document).ready(function($)
$(".style-select.frame").click(function() $(".style-select.frame").click(function()
{ {
$("table").hide(); $("table").hide();
$(".gallery").show(); $("#gallery").show();
}) })
$(".style-select.list").click(function() $(".style-select.list").click(function()
{ {
$(".gallery").hide(); $("#gallery").hide();
$("table").show(); $("table").show();
}) })
@ -562,6 +644,22 @@ jQuery(document).ready(function($)
} }
return generateCartel(); 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);
} }
}); });
}); });

156
scripts/exposition.js
View File

@ -2,13 +2,29 @@ jQuery(document).ready(function($)
{ {
$.getJSON("data.json", function(data) $.getJSON("data.json", function(data)
{ {
var pageSize = 14;
var paintingList = [];
canDisplay = true;
for (i of data) for (i of data)
{ {
if (i.photo == "ok" || i.photo == "good") if (i.photo == "ok" || i.photo == "good")
{ {
paintingHtml = '<div class="gallery-item">'; paintingList.push(i.number);
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' if (paintingList.length % (pageSize + 1) == 0)
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'; canDisplay = false;
paintingHtml = '<div class="gallery-item ';
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/" alt="Tableau ' + i.number + '"></a>';
}
else
{
paintingHtml += 'inactive"><a 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>';
}
paintingHtml += '<span class="item-title">' + i.title; paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—') if (i.year != '—')
paintingHtml += ' (' + i.year + ')'; paintingHtml += ' (' + i.year + ')';
@ -17,46 +33,114 @@ jQuery(document).ready(function($)
} }
} }
$('[data-fancybox="exposition"]').fancybox( var targetPage = 0;
urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');
function getPageRange()
{ {
infobar: false, if (window.innerWidth >= 600)
toolbar: true, return null;
smallBtn: false, else if (window.innerWidth < 600 && window.innerWidth > 450)
buttons: ["arrowLeft", "arrowRight", "close"], return 4;
arrows: false, else
transitionEffect: "fade", return 1;
baseClass: 'fancybox-custom-layout', }
mobile: {
preventCaptionOverlap: true,
},
caption: function(instance, item) var currentPage = 0;
var previousArray = []
var options =
{
dataSource: paintingList,
pageSize: pageSize,
pageRange: getPageRange(),
className: 'paginationjs-theme-ginou',
callback: function (response, pagination)
{ {
var idx = item.opts.fancyboxIndex - 1; // painting number currentPage = pagination.pageNumber;
if (item.opts.fancyboxIndex >= 1000) window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
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">'; for (i of previousArray)
cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>'; $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
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(); previousArray = response;
$.each(response, function(index, item)
{
$('[data-fancybox-index="'+item+'"]').parent().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');
},
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);
}
});
}); });
}); });

14
styles/main.css
View File

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

28
styles/pagination.css Normal file
View File

@ -0,0 +1,28 @@
.paginationjs.paginationjs-theme-ginou {
font-family:'Commissioner', Helvetica;
font-size:1rem;
line-height:0.2rem;
}
.paginationjs.paginationjs-theme-ginou .paginationjs-go-input > input[type="text"], .paginationjs.paginationjs-theme-ginou .paginationjs-pages li {
border-color:#187795;
}
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li > a:hover {
background:#D0E4E9;
}
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li.active > a {
background:#187795;
color:#D0E4E9;
line-height:1.7rem;
}
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li > a {
color:#187795;
line-height:1.7rem;
}
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li.disabled > a:hover {
background:0 0;
}