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

First implementation of dynamic requests with dummy data

Browse Source 
Not yet tested for mobile.
This commit is contained in:
Théo Marchal
2021-01-24 15:43:02 +01:00
parent 25135304f9
commit 69b18017b0
16 changed files with 1095 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
scripts/exposition.js
View File

@ -1,27 +1,41 @@
jQuery(document).ready(function($) {
$('[data-fancybox="exposition"]').fancybox({
infobar: false,
toolbar: true,
smallBtn: false,
buttons : [ "arrowLeft", "arrowRight", "close" ],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption : function( instance, item ) {
// index put inside, we can get the number: `item.opts.fancyboxIndex`
// and thus what we what inside the caption!
// TODO read json to input good captions info
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=26">&#8505;&#xFE0E;</span></a></span>\
<span class="title">La Truite</span><span class="year">1960</span>\
<span class="format">Huile sur toile (55x35)</span>\
<span class="comment">Reproduction de Courbet</span>\
</div>\
';
jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
for (i of data)
{
if (i.photo == "ok" || i.photo == "good")
{
console.log(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"></a>';
console.log(paintingHtml);
$("#gallery").append(paintingHtml);
}
}
$('[data-fancybox="exposition"]').fancybox(
{
infobar: false,
toolbar: true,
smallBtn: false,
buttons: ["arrowLeft", "arrowRight", "close"],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\
</div>\
';
}
});
});
});