Hello
I used w3schools (Lightbox) example and adapt it to my preferences:
But my javascript knowledge is poor… I need another EXIBITION gallery on same page, like in this example:
LIVE example with two EXIBITIONS
Help…
CSS:
body {
font-family: Tahoma, sans-serif;
margin: 0;
background-color: #514c5c;
color: white;
}
.gall-container {
text-align: left;
padding: 0 2% 0 2%;
width: auto;
}
.gall-text {
text-align: left;
font-size: 16px;
padding: 50px 5px 2px 5px;
width: 100%;
}
.gall-wrap {
display: flex;
height: auto;
flex-wrap: wrap;
justify-content: left;
align-content: flex-start;
padding: 5px 0 5px 0;
}
.gall-wrap > figure {
height: auto;
margin: 4px;
padding: 6px;
background-color: #676272;
width: min-content;
}
figure > img {
max-width: 90vw;
max-height: 200px;
cursor: zoom-in;
display: block;
}
figcaption {
text-align: left;
font-size: 16px;
padding: 2px;
color: #ccc;
}
/* The Modal (background) */
.gallery {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
padding: 8px;
overflow: hidden;
background-color: black;
align-items: center;
justify-content: center;
}
/* Modal Content */
.gallery-content {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
.gSlides {
display: none;
}
.gSlides > img {
display: block;
max-width:100%;
max-height: calc(100vh - 16px);
margin: auto;
}
/* The Close Button */
.close {
color: #9e97b1;
position: absolute;
top: 26px;
right: 0px;
font-size: 40px;
font-weight: bold;
border-radius: 5px 0 0 5px;
padding: 2px 16px 8px 16px;
z-index: 2;
background-color: #29272e;
}
.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 46%;
width: auto;
padding: 10px 22px;
margin-top: -10px;
color: #9e97b1;
font-weight: bold;
font-size: 30px;
user-select: none;
-webkit-user-select: none;
background-color: #29272e;
}
.prev {
left: 0;
border-radius: 0 5px 5px 0;
}
.next {
right: 0;
border-radius: 5px 0 0 5px;
}
.prev:hover,
.next:hover {
background-color: #322c42;
}
HTML
<main>
<h2 style="text-align:center">Gallery</h2>
<div class="gall-container">
<div class="gall-text"> <b style="color: silver; font-size: 120%;">EXIBITION 01</b> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla. <br> <span style="color: #b1afaf; font-size: 80%;">>> Cras non commodo massa.</span> <br> </div>
<div class="gall-wrap">
<figure><img src="https://i.picsum.photos/id/1068/7117/4090.jpg?hmac=Y6xHXrzHsNlbRTbhzZ53Yk-Ux9lUECBLbbP4wb5a1qY" alt="Image description" onclick="Gallery01();g01Slide(1)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/1084/536/354.jpg?grayscale&hmac=Ux7nzg19e1q35mlUVZjhCLxqkR30cC-CarVg-nlIf60" alt="Image description" onclick="Gallery01();g01Slide(2)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/1060/5598/3732.jpg?hmac=31kU0jp5ejnPTdEt-8tAXU5sE-buU-y1W1qk_BsiUC8" alt="Image description" onclick="Gallery01();g01Slide(3)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/1069/3500/2333.jpg?hmac=VBJ1vR2opkcKLS9NKGDl5uPxF02u6dSqbwc1x1b4oJc" alt="Image description" onclick="Gallery01();g01Slide(4)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/870/536/354.jpg?blur=2&grayscale&hmac=A5T7lnprlMMlQ18KQcVMi3b7Bwa1Qq5YJFp8LSudZ84" alt="Image description" onclick="Gallery01();g01Slide(5)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" alt="Image description" onclick="Gallery01();g01Slide(6)">
<figcaption>Short image decription</figcaption></figure>
<figure><img src="https://i.picsum.photos/id/106/2592/1728.jpg?hmac=E1-3Hac5ffuCVwYwexdHImxbMFRsv83exZ2EhlYxkgY" alt="Image description" onclick="Gallery01();g01Slide(7)">
<figcaption>Short image decription </figcaption></figure>
</div>
<div id="Gallery01" class="gallery">
<span class="close" style="cursor: pointer;" onclick="xGallery()">×</span>
<div class="gallery-content">
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/1068/7117/4090.jpg?hmac=Y6xHXrzHsNlbRTbhzZ53Yk-Ux9lUECBLbbP4wb5a1qY"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/1084/536/354.jpg?grayscale&hmac=Ux7nzg19e1q35mlUVZjhCLxqkR30cC-CarVg-nlIf60"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/1060/5598/3732.jpg?hmac=31kU0jp5ejnPTdEt-8tAXU5sE-buU-y1W1qk_BsiUC8"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/1069/3500/2333.jpg?hmac=VBJ1vR2opkcKLS9NKGDl5uPxF02u6dSqbwc1x1b4oJc"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/870/536/354.jpg?blur=2&grayscale&hmac=A5T7lnprlMMlQ18KQcVMi3b7Bwa1Qq5YJFp8LSudZ84"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0"></div>
<div class="g01Slides gSlides"><img src="https://i.picsum.photos/id/106/2592/1728.jpg?hmac=E1-3Hac5ffuCVwYwexdHImxbMFRsv83exZ2EhlYxkgY"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</main>
<br>
JS
function Gallery01() {
document.getElementById("Gallery01").style.display = "flex";
}
function xGallery() {
var closeGallery = document.getElementsByClassName('gallery');
for (var i = 0; i < closeGallery.length; i ++) {
closeGallery[i].style.display = 'none'; }
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function g01Slide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("g01Slides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}