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

Compare commits

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

No commits in common. "bfbb959cf89d4711f05e7f1f3b9f52ddaa8203f3" and "04d3e099cb067d3e5852610ff9acfd25e18aed12" have entirely different histories.
bfbb959cf8 ... 04d3e099cb

10 changed files with 46 additions and 293 deletions
Show Stats Expand all files Collapse all files

1
README.md
View File

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

8
explorer.html
View File

@ -14,9 +14,6 @@
<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>
@ -195,10 +192,7 @@
<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>
<div class="gallery"></div>
<table>
<thead>
<tr>

6
exposition.html
View File

@ -9,13 +9,10 @@
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.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="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>
@ -40,8 +37,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>
<p class="center" style="margin-bottom:0;">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div class="gallery"></div>
</article>
</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>
<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 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>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>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
View File

File diff suppressed because one or more lines are too long

11
plugins/pagination.min.js vendored
View File

File diff suppressed because one or more lines are too long

108
scripts/explorer.js
View File

@ -390,15 +390,10 @@ 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)
{
@ -462,15 +457,7 @@ jQuery(document).ready(function($)
$("table").append(result);
// gallery
paintingList.push(i.number);
if (paintingList.length % (pageSize + 1) == 0)
canDisplay = false;
paintingHtml = '<div class="gallery-item ';
if (canDisplay)
paintingHtml += 'active">';
else
paintingHtml += 'inactive">';
paintingHtml = '<div class="gallery-item">';
if (i.photo == "none")
{
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
@ -479,7 +466,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/" alt="Tableau ' + i.number + '"></a>'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'
}
paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—')
@ -491,13 +478,9 @@ 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();
@ -507,71 +490,6 @@ jQuery(document).ready(function($)
$("article.explorer h2").removeClass("active")
$("form").slideUp(200);
$("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
{
@ -595,11 +513,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();
})
@ -644,22 +562,6 @@ 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);
}
});
});

160
scripts/exposition.js
View File

@ -2,29 +2,13 @@ jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
var pageSize = 14;
var paintingList = [];
canDisplay = true;
for (i of data)
{
if (i.photo == "ok" || i.photo == "good")
{
paintingList.push(i.number);
if (paintingList.length % (pageSize + 1) == 0)
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 = '<div class="gallery-item">';
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 += '<span class="item-title">' + i.title;
if (i.year != '—')
paintingHtml += ' (' + i.year + ')';
@ -33,114 +17,46 @@ jQuery(document).ready(function($)
}
}
var targetPage = 0;
urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('page') != "")
targetPage = urlParams.get('page');
function getPageRange()
{
if (window.innerWidth >= 600)
return null;
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;
window.history.replaceState('', '', window.location.pathname + '?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-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(
{
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)
{
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();
},
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
beforeShow : function(instance, current)
function generateCartel()
{
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);
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();
}
});
});
});

14
styles/main.css
View File

@ -203,20 +203,6 @@ article.main p.signature {
/* 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 {
position:relative;
display:flex;

28
styles/pagination.css
View File

@ -1,28 +0,0 @@
.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;
}