Figure Lightbox

					
					// 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 in the Node list :
				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)) {
						
						prevFig();
					}
					// Right Arrow
					if (e.keyCode === 39 || (e.ctrlKey && e.keyCode === 39)) {
						
						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';
					});
				}
					
				

Les variables css de type "color: var(--brand_black)" proviennent de la css principale,
il suffit de les remplacer par vos propres propriétés.

					
					#lightbox {
					position: fixed;
					z-index: 9;
					text-align: center;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 1em;
					background: var(--lightbox_background);
					/* Enable scroll if needed */
					overflow: auto;
				}
				
				#lightbox_flex {
					display: flex;
					justify-content: center;
				}
				
				#placefig {
					width: 100%;
				}
				
				#placefig>figure {
					cursor: default;
				}
				
				#placefig>figure>.bitmap,
				#placefig>figure>picture>img {
					width: auto;
					max-height: 90vh;
				}
				
				/* Close button */
				#lightbox_top {
					display: flex;
					justify-content: space-around;
					color: var(--brand_black);
				}
				
				#counter_div {
					margin-left: 1em;
					line-height: 2.4em
				}
				
				#close_btn {
					user-select: none
				}
				
				#close_btn:focus,
				#close_btn:hover {
					color: var(--brand_grey);
					text-decoration: none;
					cursor: pointer
				}
				
				#close_txt {
					margin-right: .4em
				}
				
				#close_txt:hover {
					color: var(--brand_red);
				}
				
				#close_btn>svg {
					stroke: var(--brand_black);
					stroke-width: 2px;
					vertical-align: sub;
				}
				
				#close_btn:hover>svg {
					stroke: var(--brand_red);
				}
				
				#current_index,
				#total_index {
					color: var(--brand_black);
				}
				
				/* Next & previous buttons */
				#next,
				#prev {
					cursor: pointer;
					user-select: none;
					padding: 1em;
					height: max-content;
					margin-top: 4em;
				}
				
				#next>svg,
				#prev>svg {
					width: 20px;
					height: 36px;
					stroke: var(--brand_black);
					stroke-width: 2px;
					vertical-align: middle;
				}
				
				#next>svg {
					margin-left: 10px;
				}
				
				#prev>svg {
					margin-right: 10px;
				}
				
				#next:hover,
				#prev:hover {
					background-color: var(--brand_bkg);
				}
				
				#next:hover>svg,
				#prev:hover>svg {
					stroke: var(--brand);
				}
				
				/* Next & previous buttons breakpoint */
				@media (max-width: 400px) {
				
					#next,
					#prev {
				padding: 4px;
					}
				
					#prev>svg,
					#next>svg {
				width: 10px;
				height: 18px;
					}
				
					#prev>svg {
				margin-right: 4px;
					}
				
					#next>svg {
				margin-left: 4px;
					}
				
				}
				
				/* Number text (1/3 etc) */
				.numbertext {
					color: var(--brand_black);
					font-size: 12px;
					padding: 8px 12px;
					position: absolute;
					top: 0
				}