dominic
/
oe7drt-website
1
1
Fork 0
Code Issues Pull Requests Releases Activity

adds lightbox to layouts/_default/baseof.html

Browse Source 
maybe we can minify the js and css files...
main
Dominic Reich 7 months ago
parent cbf217d28c
commit 8050e9d4d5
Signed by: dominic
GPG Key ID: BC9D6AE1A3BE169A
3 changed files with 288 additions and 0 deletions
Show Stats Download Patch File Download Diff File

53
layouts/_default/baseof.html
Unescape View File

@ -0,0 +1,53 @@
{{- partial "partials/functions/warnings.html" .Site -}}
{{- partial "partials/functions/init.html" . -}}
<!doctype html>
<html
lang="{{- site.Language.LanguageCode | default "" -}}"
dir="{{- site.Language.LanguageDirection | default "ltr" -}}"
class="scroll-smooth"
data-default-appearance="{{- .Site.Params.defaultAppearance | default "light" -}}"
data-auto-appearance="{{- .Site.Params.autoSwitchAppearance | default "true" -}}"
>
{{- partial "head.html" . -}}
<body
class="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"
>
<div id="the-top" class="absolute flex self-center">
<a
class="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600"
href="#main-content"
><span class="pe-2 font-bold text-primary-600 dark:text-primary-400">&darr;</span
>{{ i18n "nav.skip_to_main" }}</a
>
</div>
{{ $header := print "partials/header/" .Site.Params.header.layout ".html" }}
{{ if templates.Exists $header }}
{{ partial $header . }}
{{ else }}
{{ partial "partials/header/basic.html" . }}
{{ end }}
<div class="relative flex grow flex-col">
<main id="main-content" class="grow">
{{ block "main" . }}{{ end }}
{{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
<div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12">
<a
href="#the-top"
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
aria-label="{{ i18n "nav.scroll_to_top_title" }}"
title="{{ i18n "nav.scroll_to_top_title" }}"
>
&uarr;
</a>
</div>
{{ end }}
</main>
{{- partial "footer.html" . -}}
{{ if .Site.Params.enableSearch | default false }}
{{- partial "search.html" . -}}
{{ end }}
</div>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css">
</body>
</html>

94
static/css/lightbox.css
Unescape View File

@ -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;
}

141
static/js/lightbox.js
Unescape View File

@ -0,0 +1,141 @@
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);
});
});
});
Write Preview
Loading…
Cancel
Save