132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
|
function galleryFilter(showValue) {
|
||
|
const elems = document.getElementsByClassName("gallery-item");
|
||
|
const dElems = document.getElementsByClassName("gallery-description");
|
||
|
const showElems = document.getElementsByClassName(showValue);
|
||
|
|
||
|
for(let i = 0; i < dElems.length; i++){
|
||
|
const dElem = dElems[i];
|
||
|
dElem.style.display='none';
|
||
|
}
|
||
|
|
||
|
for(let i = 0; i < elems.length; i++){
|
||
|
const elem = elems[i];
|
||
|
elem.style.display='none';
|
||
|
}
|
||
|
|
||
|
for(let i = 0; i < showElems.length; i++){
|
||
|
const sElem = showElems[i];
|
||
|
sElem.style.display='initial';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
let currImgArr = [];
|
||
|
|
||
|
let currImgInd = 0;
|
||
|
|
||
|
let currImg = 'img/portfolio-01.jpg';
|
||
|
|
||
|
function openModalAll(className, imgArr) {
|
||
|
const elems = document.getElementsByClassName(className);
|
||
|
|
||
|
elems[0].style.display = imgArr ? 'flex' : 'none';
|
||
|
|
||
|
currImgArr = imgArr;
|
||
|
}
|
||
|
|
||
|
function zoomModal(initIndex) {
|
||
|
const elems = document.getElementsByClassName("modal-gallery");
|
||
|
|
||
|
elems[0].style.display = initIndex === false ? 'none' : 'flex';
|
||
|
|
||
|
currImgInd = initIndex;
|
||
|
|
||
|
currImg = 'img/' + currImgArr[currImgInd];
|
||
|
|
||
|
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||
|
|
||
|
imgElems[0].src = currImg;
|
||
|
|
||
|
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||
|
if(currImgInd === (currImgArr.length - 1)){
|
||
|
nextElems[0].style.visibility = 'hidden';
|
||
|
nextElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
nextElems[0].style.visibility = 'visible';
|
||
|
nextElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
|
||
|
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||
|
if(currImgInd === 0){
|
||
|
prevElems[0].style.visibility = 'hidden';
|
||
|
prevElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
prevElems[0].style.visibility = 'visible';
|
||
|
prevElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
|
||
|
if(imgArr.length === 1){
|
||
|
nextElems[0].style.visibility = 'hidden';
|
||
|
nextElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
nextElems[0].style.visibility = 'visible';
|
||
|
nextElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function nextImg() {
|
||
|
currImgInd += 1;
|
||
|
|
||
|
currImg = 'img/' + currImgArr[currImgInd];
|
||
|
|
||
|
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||
|
|
||
|
imgElems[0].src = currImg;
|
||
|
|
||
|
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||
|
if(currImgInd === (currImgArr.length - 1)){
|
||
|
nextElems[0].style.visibility = 'hidden';
|
||
|
nextElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
nextElems[0].style.visibility = 'visible';
|
||
|
nextElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
|
||
|
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||
|
if(currImgInd === 0){
|
||
|
prevElems[0].style.visibility = 'hidden';
|
||
|
prevElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
prevElems[0].style.visibility = 'visible';
|
||
|
prevElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function prevImg() {
|
||
|
currImgInd -= 1;
|
||
|
|
||
|
currImg = 'img/' + currImgArr[currImgInd];
|
||
|
|
||
|
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||
|
|
||
|
imgElems[0].src = currImg;
|
||
|
|
||
|
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||
|
if(currImgInd === (currImgArr.length - 1)){
|
||
|
nextElems[0].style.visibility = 'hidden';
|
||
|
nextElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
nextElems[0].style.visibility = 'visible';
|
||
|
nextElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
|
||
|
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||
|
if(currImgInd === 0){
|
||
|
prevElems[0].style.visibility = 'hidden';
|
||
|
prevElems[0].style.pointerEvents = 'none';
|
||
|
} else {
|
||
|
prevElems[0].style.visibility = 'visible';
|
||
|
prevElems[0].style.pointerEvents = 'initial';
|
||
|
}
|
||
|
}
|
||
|
|