moodlebox · martignoni · Jul 22, 2022 · Jul 22, 2022
diff --git a/assets/css/gallery.css b/assets/css/gallery.css
@@ -0,0 +1,35 @@
+/* Gallery */
+
+.image-gallery {
+  overflow: auto;
+  margin-left: -1%!important;
+}
+
+.image-gallery li {
+  float: left;
+  display: block;
+  margin: 0 0 1% 1%;
+  width: 31%;
+}
+
+.image-gallery li:before {
+  content: " "!important;
+}
+.image-gallery li a {
+  text-align: center;
+  text-decoration: none!important;
+  color: #777;
+}
+
+.image-gallery li a span {
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 3px 0;
+}
+
+.image-gallery li a img {
+  width: 100%;
+  display: block;
+}
diff --git a/assets/css/lightbox.css b/assets/css/lightbox.css
@@ -0,0 +1,94 @@
+#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
+#lightbox .img {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    max-width: 100%;
+    max-height: 100%;
+}
+#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
+@media screen and (min-width: 1200px) {
+    #lightbox .img {
+        max-width: 1200px;
+    }
+}
+@media screen and (min-height: 1200px) {
+    #lightbox .img {
+        max-height: 1200px;
+    }
+}
+#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+}
+
+#lightbox span {display: none;}
+
+#lightbox .videoWrapperContainer {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    max-width: 900px;
+    max-height: 100%;
+}
+#lightbox .videoWrapperContainer .videoWrapper {
+    height: 0;
+    line-height: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    padding-bottom: 56.333%; /* custom */
+    background: black;
+}
+#lightbox .videoWrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+}
+#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
+#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
+#lightbox #prev {left: 0;}
+#lightbox #next {right: 0;}
+#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
+#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
+-webkit-transform-origin: 50% 50%;
+-moz-transform-origin: 50% 50%;
+-o-transform-origin: 50% 50%;
+transform-origin: 50% 50%;
+/* Safari */
+-webkit-transform: rotate(-45deg);
+/* Firefox */
+-moz-transform: rotate(-45deg);
+/* IE */
+-ms-transform: rotate(-45deg);
+/* Opera */
+-o-transform: rotate(-45deg);
+}
+#lightbox #close:after {
+/* Safari */
+-webkit-transform: rotate(45deg);
+/* Firefox */
+-moz-transform: rotate(45deg);
+/* IE */
+-ms-transform: rotate(45deg);
+/* Opera */
+-o-transform: rotate(45deg);
+}
+#lightbox, #lightbox * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
diff --git a/assets/js/lightbox.js b/assets/js/lightbox.js
@@ -0,0 +1,142 @@
+function is_youtubelink(url) {
+    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+    return (url.match(p)) ? RegExp.$1 : false;
+}
+function is_imagelink(url) {
+    var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i;
+    return (url.match(p)) ? true : false;
+}
+function is_vimeolink(url,el) {
+    var id = false;
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
+            if (xmlhttp.status == 200) {
+                var response = JSON.parse(xmlhttp.responseText);
+                id = response.video_id;
+                console.log(id);
+                el.classList.add('lightbox-vimeo');
+                el.setAttribute('data-id',id);
+
+                el.addEventListener("click", function(event) {
+                    event.preventDefault();
+                    document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://player.vimeo.com/video/'+el.getAttribute('data-id')+'/?autoplay=1&byline=0&title=0&portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
+                    document.getElementById('lightbox').style.display = 'block';
+
+                    setGallery(this);
+                });
+            }
+            else if (xmlhttp.status == 400) {
+                alert('There was an error 400');
+            }
+            else {
+                alert('something else other than 200 was returned');
+            }
+        }
+    };
+    xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true);
+    xmlhttp.send();
+}
+function setGallery(el) {
+    var elements = document.body.querySelectorAll(".gallery");
+    elements.forEach(element => {
+        element.classList.remove('gallery');
+	});
+	if(el.closest('ul, p')) {
+		var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']");
+		link_elements.forEach(link_element => {
+			link_element.classList.remove('current');
+		});
+		link_elements.forEach(link_element => {
+			if(el.getAttribute('href') == link_element.getAttribute('href')) {
+				link_element.classList.add('current');
+			}
+		});
+		if(link_elements.length>1) {
+			document.getElementById('lightbox').classList.add('gallery');
+			link_elements.forEach(link_element => {
+				link_element.classList.add('gallery');
+			});
+		}
+		var currentkey;
+		var gallery_elements = document.querySelectorAll('a.gallery');
+		Object.keys(gallery_elements).forEach(function (k) {
+			if(gallery_elements[k].classList.contains('current')) currentkey = k;
+		});
+		if(currentkey==(gallery_elements.length-1)) var nextkey = 0;
+		else var nextkey = parseInt(currentkey)+1;
+		if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1);
+		else var prevkey = parseInt(currentkey)-1;
+		document.getElementById('next').addEventListener("click", function() {
+			gallery_elements[nextkey].click();
+		});
+		document.getElementById('prev').addEventListener("click", function() {
+			gallery_elements[prevkey].click();
+		});
+	}
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+
+    //create lightbox div in the footer
+    var newdiv = document.createElement("div");
+    newdiv.setAttribute('id',"lightbox");
+    document.body.appendChild(newdiv);
+
+    //add classes to links to be able to initiate lightboxes
+    var elements = document.querySelectorAll('a');
+    elements.forEach(element => {
+        var url = element.getAttribute('href');
+        if(url) {
+            if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
+                is_vimeolink(url,element);
+            }
+            if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
+                element.classList.add('lightbox-youtube');
+                element.setAttribute('data-id',is_youtubelink(url));
+            }
+            if(is_imagelink(url) && !element.classList.contains('no-lightbox')) {
+                element.classList.add('lightbox-image');
+                var href = element.getAttribute('href');
+                var filename = href.split('/').pop();
+                var split = filename.split(".");
+                var name = split[0];
+                element.setAttribute('title',name);
+            }
+        }
+    });
+
+    //remove the clicked lightbox
+    document.getElementById('lightbox').addEventListener("click", function(event) {
+        if(event.target.id != 'next' && event.target.id != 'prev'){
+            this.innerHTML = '';
+            document.getElementById('lightbox').style.display = 'none';
+        }
+    });
+
+    //add the youtube lightbox on click
+    var elements = document.querySelectorAll('a.lightbox-youtube');
+    elements.forEach(element => {
+        element.addEventListener("click", function(event) {
+            event.preventDefault();
+            document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://www.youtube.com/embed/'+this.getAttribute('data-id')+'?autoplay=1&showinfo=0&rel=0"></iframe></div>';
+            document.getElementById('lightbox').style.display = 'block';
+
+            setGallery(this);
+        });
+    });
+
+    //add the image lightbox on click
+    var elements = document.querySelectorAll('a.lightbox-image');
+    elements.forEach(element => {
+        element.addEventListener("click", function(event) {
+            event.preventDefault();
+            document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="img" style="background: url(\''+this.getAttribute('href')+'\') center center / contain no-repeat;" title="'+this.getAttribute('title')+'" ><img src="'+this.getAttribute('href')+'" alt="'+this.getAttribute('title')+'" /></div><span>'+this.getAttribute('title')+'</span>';
+            document.getElementById('lightbox').style.display = 'block';
+
+            setGallery(this);
+        });
+    });
+
+});
+
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,20 +1,24 @@
 <!-- Javascript to load in footer -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-{{ if .HasShortcode "gallery" }}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-{{ end }}
 {{ if site.IsServer }}
   {{ $frontJS := resources.Get "js/front.js" }}
   {{ $moodleboxJS := resources.Get "js/moodlebox.js" }}
   {{ $carouselJS := resources.Get "js/carousel.js" }}
   <script src="{{ $frontJS.Permalink }}"></script>
   <script src="{{ $moodleboxJS.Permalink }}"></script>
   <script src="{{ $carouselJS.Permalink }}"></script>
+  {{ if .HasShortcode "gallery" }}
+  {{ $lightboxJS := resources.Get "js/lightbox.js" }}
+  <script src="{{ $lightboxJS.Permalink }}"></script>
+  {{ end }}
 {{ else }}
   {{ $frontJS := resources.Get "js/front.js" | minify | fingerprint }}
   {{ $moodleboxJS := resources.Get "js/moodlebox.js" | minify | fingerprint }}
   {{ $carouselJS := resources.Get "js/carousel.js" | minify | fingerprint }}
   <script src="{{ $frontJS.Permalink }}" integrity="{{ $frontJS.Data.Integrity }}"></script>
   <script src="{{ $moodleboxJS.Permalink }}" integrity="{{ $moodleboxJS.Data.Integrity }}"></script>
   <script src="{{ $carouselJS.Permalink }}" integrity="{{ $carouselJS.Data.Integrity }}"></script>
+  {{ if .HasShortcode "gallery" }}
+  {{ $lightboxJS := resources.Get "js/lightbox.js" | minify | fingerprint }}
+  <script src="{{ $lightboxJS.Permalink }}" integrity="{{ $lightboxJS.Data.Integrity }}"></script>
+  {{ end }}
 {{ end }}
diff --git a/layouts/partials/stylesheets.html b/layouts/partials/stylesheets.html
@@ -1,9 +1,6 @@
 <!-- CSS to load in header -->
 <!-- Bootstrap and Fork Awesome css -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-{{ if .HasShortcode "gallery" }}
-<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" rel="stylesheet" crossorigin="anonymous" />
-{{ end }}
 <!-- Custom fonts and styles for this template -->
 {{ if site.IsServer }}
   {{ $cssOpts := (dict "enableSourceMap" true) }}
@@ -19,6 +16,12 @@
   <link href="{{ $syntaxCSS.Permalink }}" rel="stylesheet">
   <link href="{{ $customCSS.Permalink }}" rel="stylesheet">
   <link href="{{ $carouselCSS.Permalink }}" rel="stylesheet">
+  {{ if .HasShortcode "gallery" }}
+  {{ $lightboxCSS := resources.Get "css/lightbox.css" | toCSS $cssOpts }}
+  {{ $galleryCSS := resources.Get "css/gallery.css" | toCSS $cssOpts }}
+  <link href="{{ $lightboxCSS.Permalink }}" rel="stylesheet">
+  <link href="{{ $galleryCSS.Permalink }}" rel="stylesheet">
+  {{ end }}
 {{ else }}
   {{ $cssOpts := (dict "enableSourceMap" false ) }}
   {{ $forkAwesomeCSS := resources.Get "css/fork-awesome.css" | toCSS $cssOpts | minify | fingerprint }}
@@ -33,4 +36,10 @@
   <link href="{{ $syntaxCSS.Permalink }}" integrity="{{ $syntaxCSS.Data.Integrity }}" rel="stylesheet">
   <link href="{{ $customCSS.Permalink }}" integrity="{{ $customCSS.Data.Integrity }}" rel="stylesheet">
   <link href="{{ $carouselCSS.Permalink }}" integrity="{{ $carouselCSS.Data.Integrity }}" rel="stylesheet">
+  {{ if .HasShortcode "gallery" }}
+  {{ $lightboxCSS := resources.Get "css/lightbox.css" | toCSS $cssOpts | minify | fingerprint }}
+  {{ $galleryCSS := resources.Get "css/gallery.css" | toCSS $cssOpts | minify | fingerprint }}
+  <link href="{{ $lightboxCSS.Permalink }}" integrity="{{ $lightboxCSS.Data.Integrity }}" rel="stylesheet">
+  <link href="{{ $galleryCSS.Permalink }}" integrity="{{ $galleryCSS.Data.Integrity }}" rel="stylesheet">
+  {{ end }}
 {{ end }}
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
@@ -1,7 +1,6 @@
 {{ $album := "gallery" }}
 {{ with .Get "album" }}{{ $album = . }}{{ end }}
-<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
-
+<ul class="image-gallery" itemscope itemtype="http://schema.org/ImageGallery">
   {{/* Attempt to automatically load gallery images from page bundle */}}
   {{ $images := ($.Page.Resources.ByType "image").Match (printf "%s/*" $album) }}
   {{ with $images }}
@@ -18,9 +17,11 @@
         {{end}}
       {{ end }}
     {{ end }}
-    <a data-fancybox="gallery-{{ $album }}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{ . }}"{{ end }}>
-    <img src="{{ .RelPermalink }}" alt="{{ with $caption }}{{ . }}{{ end }}">
-    </a>
+    <li>
+      <a href="{{ .RelPermalink }}" class="lightbox-image" {{ with $caption }}data-caption="{{ . }}"{{ end }}>
+        <img src="{{ .RelPermalink }}" alt="{{ with $caption }}{{ . }}{{ end }}">
+      </a>
+    </li>
   {{ end }}
 
   {{else}}
@@ -34,9 +35,11 @@
           {{ $.Scratch.Set "src" (printf "img/%s" .image | relURL) }}
         {{ end }}
       {{ end }}
-      <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{ . }}"{{ end }} href="{{$.Scratch.Get "src"}}">
-        <img src="{{$.Scratch.Get "src"}}" alt="{{ with .caption }}{{ . }}{{ end }}">
-      </a>
+      <li>
+        <a href="{{$.Scratch.Get "src"}}" class="lightbox-image" {{ with .caption }}data-caption="{{ . }}"{{ end }}>
+          <img src="{{$.Scratch.Get "src"}}" alt="{{ with .caption }}{{ . }}{{ end }}">
+        </a>
+      </li>
     {{ end }}
   {{ end }}
-</div>
+</ul>