Ajout lightbox JS

This commit is contained in:
nyanloutre 2020-12-06 16:38:41 +01:00
parent 443bf858c2
commit dfdd779b31
Signed by: nyanloutre
GPG Key ID: 194A92D1103ACB2A
3 changed files with 12 additions and 11 deletions

View File

@ -132,13 +132,12 @@ body {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
ul { #portfolio-gallery {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style-type: none !important; a {
li {
img { img {
max-width: 100%; max-width: 100%;
} }

View File

@ -7,5 +7,5 @@
{{ $styles := resources.Get "sass/main.scss" | toCSS }} {{ $styles := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $styles.Permalink }}"> <link rel="stylesheet" href="{{ $styles.Permalink }}">
<link rel="canonical" href="{{ .Permalink }}"> <link rel="canonical" href="{{ .Permalink }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css">
</head> </head>

View File

@ -3,18 +3,20 @@
<article> <article>
<div class="content portfolio"> <div class="content portfolio">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<ul> <div id="portfolio-gallery">
{{ range .Params.images }} {{ range .Params.images }}
{{ $img := $.Page.Resources.GetMatch . }} {{ $img := $.Page.Resources.GetMatch . }}
<li> <a href="{{ $img.RelPermalink }}">
<figure>
<img src="{{ $img.RelPermalink }}" alt=""> <img src="{{ $img.RelPermalink }}" alt="">
</figure> </a>
</li>
{{ end }} {{ end }}
</ul> </div>
{{ .Content }} {{ .Content }}
</div> </div>
</article> </article>
</section> </section>
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js"></script>
<script>
lightGallery(document.getElementById('portfolio-gallery'));
</script>
{{ end }} {{ end }}