mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

Complete rewrite #1

Merged
mxmehl merged 27 commits from refactoring into master 2024-02-07 22:17:50 +01:00
Conversation 0 Commits 27 Files Changed 11 +169 -135
3 changed files with 169 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4b5fe07ece - Show all commits

239
assets/scss/snap-gallery.scss
View File

@@ -18,123 +18,170 @@
} }
} }
/* The Modal (background) */ .snap-lightbox {
.modal { /** Default lightbox to hidden */
display: none; display: none;
/** Position and style */
position: fixed; position: fixed;
z-index: 1; z-index: 999;
padding-top: 50px;
//padding-bottom: 10%;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%;; height: 100%;
overflow: auto; text-align: center;
background-color: black; white-space: nowrap;
} top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
/* Modal Content */ /* keep lightbox in middle. TODO: hacky, and not realibly in middle */
.modal-content { &:before {
position: relative; content: "";
background-color: #fefefe; display: inline-block;
margin: auto; vertical-align: middle;
padding: 0; width: 0;
width: 90%; /* adjust for white space between pseudo element and next sibling */
max-width: 1200px; margin-right: -.25em;
height: calc(100% - 100px); /* stretch line height */
} height: 100%;
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.snap-slide {
display: none;
max-height: 100%;
img {
max-height: 100%;
} }
} }
/* Next & previous buttons */ // /* Click on the complete background closes the lightbox */
.prev, // /* Exception: arrow in gallery, they have higher z-index */
.next { // a.snap-lightbox-close {
cursor: pointer; // position: fixed;
position: absolute; // z-index: 800;
top: 50%; // width: 100%;
width: auto; // height: 100%;
padding: 16px; // text-align: center;
margin-top: -50px; // white-space: nowrap;
color: white; // top: 0;
font-weight: bold; // left: 0;
font-size: 20px; // }
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
text-decoration: none !important;
}
/* Position the "next button" to the right */ /* Container for image */
.next { .snap-lightbox-inner {
right: 0; display: inline-block;
border-radius: 3px 0 0 3px; vertical-align: middle;
} white-space: normal;
max-width: 90%;
max-height: 80%;
height: 100%;
/* On hover, add a black background color with a little bit see-through */ /* Number text (1/3 etc) */
.prev:hover, .numbertext {
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2; color: #f2f2f2;
background-color: #000; background-color: #000;
font-size: 12px; font-size: 12px;
padding: 8px 12px; padding: 8px 12px;
position: absolute; position: absolute;
top: 0; top: 10%;
}
img {
max-height: 100%;
}
// TODO: Untested
p {
color: #fff;
z-index: 810;
position: relative;
}
} }
/* Caption text */ // /* Caption text */
.caption-container { // .caption-container {
// text-align: center;
// background-color: black;
// padding: 2px 16px;
// color: white;
// }
/* prev/next arrows & close button */
.snap-lightbox-prev,
.snap-lightbox-next {
position: fixed;
z-index: 800;
width: 5%;
height: 100%;
text-align: center; text-align: center;
background-color: black; top: 0;
padding: 2px 16px;
.snap-lightbox-arrow {
display: inline-block;
position: fixed;
top: 50%;
z-index: 900;
border: solid #fff;
border-width: 0 7px 7px 0;
display: inline-block;
padding: 1%;
}
&:hover>.snap-lightbox-arrow {
border-color: #999;
transition: all 0.25s ease;
}
}
.snap-lightbox-prev {
left: 0;
.snap-lightbox-arrow {
left: 2%;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
}
.snap-lightbox-next {
right: 0;
.snap-lightbox-arrow {
right: 2%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
/* The Close Button */
.snap-close {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 15px;
right: 15px;
height: 50px;
width: 50px;
color: white; color: white;
font-size: 50px;
font-weight: bold;
z-index: 900;
&:hover,
&:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
} }
img.img-thumb { @media screen and (max-width: 767px) {
opacity: 0.6; .snap-lightbox-inner {
} max-width: 80%;
}
.img-active, .snap-lightbox-prev,
.img-thumb:hover { .snap-lightbox-next {
opacity: 1 !important; width: 10%;
} }
img.hover-shadow { .snap-lightbox-close-button {
transition: 0.3s; width: 10%;
} height: calc(10vw);
/* ~10% width */
.hover-shadow:hover { }
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }

32
layouts/shortcodes/snap-gallery.html
View File

@@ -2,7 +2,6 @@
{{- with resources.Get "scss/snap-gallery.scss" | toCSS }} {{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous"> <link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{- end }} {{- end }}
<script src="/js/snap-gallery.js"></script>
{{/* Initialise variables */}} {{/* Initialise variables */}}
{{ $imgs := slice }} {{ $imgs := slice }}
@@ -31,31 +30,26 @@
</div> </div>
{{/* The Modal/Lightbox */}} {{/* The Modal/Lightbox */}}
<div id="snap-modal" class="modal"> <div class="snap-lightbox">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
{{ range $i, $img := $imgs }} {{ range $i, $img := $imgs }}
<div class="snap-slide"> <div class="snap-lightbox-inner">
<div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div> <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
<img src="{{ $img }}" style="width:100%"> <img src="{{ $img }}" style="width:100%">
</div> </div>
{{ end }} {{ end }}
<!-- Next/previous controls --> <!-- Close and Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> <span class="snap-close" onclick="closeModal()">&times;</span>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<!-- Caption text --> <a class="snap-lightbox-prev" onclick="plusSlides(-1)"><i class="snap-lightbox-arrow"></i></a>
<a class="snap-lightbox-next" onclick="plusSlides(1)"><i class="snap-lightbox-arrow"></i></a>
{{/* <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a> */}}
{{/* <!-- Caption text -->
<div class="caption-container"> <div class="caption-container">
<p id="caption"></p> <p id="caption"></p>
</div> </div> */}}
<!-- Thumbnail image controls -->
{{/* {{ range $i, $img := $imgs }}
<div class="snap-image">
<img class="img-thumb" src="{{ $img }}" onclick="currentSlide({{ add $i 1 }})" alt="Nature">
</div>
{{ end }} */}}
</div>
</div> </div>
<script src="/js/snap-gallery.js"></script>

13
static/js/snap-gallery.js
View File

@@ -1,11 +1,11 @@
// Open the Modal // Open the Modal
function openModal() { function openModal() {
document.getElementById("snap-modal").style.display = "block"; document.getElementsByClassName("snap-lightbox")[0].style.display = "block";
} }
// Close the Modal // Close the Modal
function closeModal() { function closeModal() {
document.getElementById("snap-modal").style.display = "none"; document.getElementsByClassName("snap-lightbox")[0].style.display = "none";
} }
var slideIndex = 1; var slideIndex = 1;
@@ -23,18 +23,11 @@ function currentSlide(n) {
function showSlides(n) { function showSlides(n) {
var i; var i;
var slides = document.getElementsByClassName("snap-slide"); var slides = document.getElementsByClassName("snap-lightbox-inner");
var dots = document.getElementsByClassName("img-thumb");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 } if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length } if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) { for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; slides[i].style.display = "none";
} }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" img-active", "");
}
slides[slideIndex - 1].style.display = "inline-block"; slides[slideIndex - 1].style.display = "inline-block";
dots[slideIndex - 1].className += " img-active";
captionText.innerHTML = dots[slideIndex - 1].alt;
} }