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

Basic implementation of details in exposition

Browse Source
This commit is contained in:
Théo Marchal 2021-02-13 01:54:45 +01:00
parent 8b1a6ea055
commit e0acc55670
3 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exposition.html
View File

@ -37,7 +37,7 @@
<article class="exposition"> <article class="exposition">
<h1>Exposition</h1> <h1>Exposition</h1>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p> <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> <div class="gallery"></div>
</article> </article>
</body> </body>

7
scripts/exposition.js
View File

@ -6,8 +6,13 @@ jQuery(document).ready(function($)
{ {
if (i.photo == "ok" || i.photo == "good") 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 = '<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 += '<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 + ')';
paintingHtml += '</span></div>';
$(".gallery").append(paintingHtml); $(".gallery").append(paintingHtml);
} }
} }

16
styles/main.css
View File

@ -215,6 +215,22 @@ article.exposition .gallery {
text-align:center; text-align:center;
} }
article .gallery .gallery-item {
display:inline-block;
position:relative;
margin:0.75rem;
margin-top:0.75rem;
margin-top:1.6rem;
}
article .gallery .item-title {
font-size:0.9rem;
margin:0rem;
padding:0rem;
padding-top:0rem;
display:block;
}
article .gallery img { article .gallery img {
max-height:30vh; max-height:30vh;
max-width:40vw; max-width:40vw;