87 lines
3.4 KiB
JavaScript
87 lines
3.4 KiB
JavaScript
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.tabIndex = 0;
|
|
newdiv.setAttribute('id',"lightbox");
|
|
document.body.appendChild(newdiv);
|
|
|
|
//add classes to links to be able to initiate lightboxes
|
|
var elements = document.querySelectorAll('img');
|
|
elements.forEach(element => {
|
|
var url = element.getAttribute('data-stl');
|
|
if(url) {
|
|
element.classList.add('lightbox-image-stl');
|
|
}
|
|
});
|
|
|
|
//remove the clicked lightbox
|
|
document.getElementById('lightbox').addEventListener("click", function(event) {
|
|
if(event.target.id == 'close'){
|
|
this.innerHTML = '';
|
|
document.getElementById('lightbox').style.display = 'none';
|
|
}
|
|
});
|
|
// hit esc to dismiss lightbox
|
|
document.getElementById('lightbox').addEventListener("keydown", function(event) {
|
|
if(event.key == 'Escape'){
|
|
this.innerHTML = '';
|
|
document.getElementById('lightbox').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
//add the stl lightbox on click
|
|
var elements = document.querySelectorAll('img.lightbox-image-stl');
|
|
elements.forEach(element => {
|
|
element.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">›</a><a id="prev">‹</a><div id="model" class="img" style="width: 100%; height:100%;" title="'+this.getAttribute('title')+'" ><</div><span>'+this.getAttribute('title')+'</span>';
|
|
document.getElementById('lightbox').style.display = 'block';
|
|
document.getElementById('model').setAttribute('data-rotate', 'x');
|
|
document.getElementById('model').setAttribute('data-zdistance', '4');
|
|
STLViewer(document.getElementById("model"), this.getAttribute('data-stl'));
|
|
setGallery(this);
|
|
document.getElementById('lightbox').focus();
|
|
});
|
|
});
|
|
|
|
});
|