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 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';
});
}
la CSS :
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
}