Max Mehl
437b0202ba
A complete rewrite of the gallery plugin: * Using flexbox * Using lightweight JS for lightbox to avoid anchor links, and allow full rotation * Add slideshow as an additional field * Make many more things configurable * Better support for dirs, allow mixed paths * Translatable captions for many files using metadata files * SCSS instead of CSS Reviewed-on: #1 Co-authored-by: Max Mehl <mail@mehl.mx> Co-committed-by: Max Mehl <mail@mehl.mx>
69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!-- Images used to open the lightbox -->
|
|
<div class="row">
|
|
<div class="column">
|
|
<img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
|
|
</div>
|
|
<div class="column">
|
|
<img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
|
|
</div>
|
|
<div class="column">
|
|
<img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
|
|
</div>
|
|
<div class="column">
|
|
<img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Modal/Lightbox -->
|
|
<div id="myModal" class="modal">
|
|
<span class="close cursor" onclick="closeModal()">×</span>
|
|
<div class="modal-content">
|
|
|
|
<div class="mySlides">
|
|
<div class="numbertext">1 / 4</div>
|
|
<img src="img1.jpg" style="width:100%">
|
|
</div>
|
|
|
|
<div class="mySlides">
|
|
<div class="numbertext">2 / 4</div>
|
|
<img src="img2.jpg" style="width:100%">
|
|
</div>
|
|
|
|
<div class="mySlides">
|
|
<div class="numbertext">3 / 4</div>
|
|
<img src="img3.jpg" style="width:100%">
|
|
</div>
|
|
|
|
<div class="mySlides">
|
|
<div class="numbertext">4 / 4</div>
|
|
<img src="img4.jpg" style="width:100%">
|
|
</div>
|
|
|
|
<!-- Next/previous controls -->
|
|
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
|
|
|
<!-- Caption text -->
|
|
<div class="caption-container">
|
|
<p id="caption"></p>
|
|
</div>
|
|
|
|
<!-- Thumbnail image controls -->
|
|
<div class="column">
|
|
<img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
|
|
</div>
|
|
|
|
<div class="column">
|
|
<img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
|
|
</div>
|
|
|
|
<div class="column">
|
|
<img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
|
|
</div>
|
|
|
|
<div class="column">
|
|
<img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
|
|
</div>
|
|
</div>
|
|
</div>
|