Figure Lightbox

le HTML :

le Javascript :

	
	// get all figures in a Node list
const allFigsNodeList = document.querySelectorAll('figure'),
	lightBox = document.getElementById('lightbox'),
	placeFig = document.getElementById('placefig'),
	lightboxTop = document.getElementById('lightbox_top'),
	counter = document.getElementById('counter_div'),
	closeBtn = document.getElementById('close_btn'),
	currentIndexTxt = document.getElementById('current_index'),
	totalIndexTxt = document.getElementById('total_index'),
	nextBtn = document.getElementById('next'),
	prevBtn = document.getElementById('prev'),
	svgs = lightBox.getElementsByTagName('svg');

// title loop
defaultTitle();
// loop items
allFigsNodeList.forEach((currentFig, index) => {
	currentFig.onclick = () => {

		openLightBox();
		// hide Buttons;
		hidePrevBtn(index);
		hideNextBtn(index);
		let currentIndex = index + 1;

		displayCurrentIndex(currentIndex);
		totalIndexTxt.textContent = allFigsNodeList.length;

		// clone cliqued figure
		const figClone = currentFig.cloneNode(true);
		// place cliqued figure
		placeFig.appendChild(figClone);
		// prev next buttons
		prevBtn.addEventListener('click', prevFig);
		nextBtn.addEventListener('click', nextFig);

		function prevFig() {
			let prevFig = allFigsNodeList[--index];
			currentIndex = index + 1;
			displayCurrentIndex(currentIndex);
			if (index <= 0) {
				prevBtn.style.visibility = 'hidden';
				prevFig = allFigsNodeList[0];
				index = 0;
				currentIndex = index + 1;
				displayCurrentIndex(currentIndex);
			} else {
				showBtns();
			}
			prevFigClone = prevFig.cloneNode(true);
			placeFig.appendChild(prevFigClone);
			placeFig.removeChild(placeFig.querySelector('figure'));
		}

		function nextFig() {
			let nextFig = allFigsNodeList[++index];
			currentIndex = index + 1;
			displayCurrentIndex(currentIndex);
			if (index >= allFigsNodeList.length - 1) {
				nextBtn.style.visibility = 'hidden';
				nextFig = allFigsNodeList[allFigsNodeList.length - 1];
				index = allFigsNodeList.length - 1;
				currentIndex = allFigsNodeList.length;
				displayCurrentIndex(currentIndex);
			} else {
				showBtns();
			}
			nextFigClone = nextFig.cloneNode(true);
			placeFig.appendChild(nextFigClone);
			placeFig.removeChild(placeFig.querySelector('figure'));
		}
		// close lightBox
		closeBtn.onclick = () => {
			closeLightBox();
		};
		window.onclick = (event) => {
			if (event.target == lightBox) {
				closeLightBox();
			}
		}
		document.onkeyup = (event) => {
			if (event.key === 'Escape') {
				closeLightBox();
			}
		}
		// prev next keys < >
		document.addEventListener('keydown', keyHandler);
		function keyHandler(e) {
			// Left Arrow
			if (e.keyCode === 37 || (e.ctrlKey && e.keyCode === 37)) {
				// e.preventDefault();
				prevFig();
			}
			// Right Arrow
			if (e.keyCode === 39 || (e.ctrlKey && e.keyCode === 39)) {
				// e.preventDefault();
				nextFig();
			}
		}
	}
});

function displayCurrentIndex(currentIndex) {
	currentIndexTxt.textContent = currentIndex + ' / ';
}

function hidePrevBtn(index) {
	if (index == 0) {
		prevBtn.style.visibility = 'hidden';
	} else {
		prevBtn.style.visibility = 'visible';
	}
}

function hideNextBtn(index) {
	if ( index == allFigsNodeList.length - 1 ) {
		nextBtn.style.visibility = 'hidden';
	} else {
		nextBtn.style.visibility = 'visible';
		nextBtn.style.display = 'block';
	}
}

function showBtns() {
	prevBtn.style.visibility = 'visible';
	nextBtn.style.visibility = 'visible';
}

function openLightBox() {
	lightBox.classList.remove('hide');
	allFigsNodeList.forEach(titleTag => {
		titleTag.title = 'touche ESC pour fermer | flèches pour naviguer';
	});
}

function closeLightBox() {
	lightBox.classList.add('hide');
	placeFig.removeChild(placeFig.querySelector('figure'));
	defaultTitle();
}

function defaultTitle() {
	allFigsNodeList.forEach(titleTag => {
		titleTag.title = 'Agrandir';
	});
}