Image gallery - javascript problem

skulptron · April 30, 2021, 3:57pm

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:

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()">&times;</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)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</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";
    }

Martyr2 · April 30, 2021, 5:28pm

Honestly to do that you are going to have to make significant changes to that code. Much of that code was written with the idea of one instance of the gallery. You can start by making some of the functions more generic and taking in a gallery id, gallery slides class name and a slide index specific to each gallery.

For instance…

function Gallery01() {
        document.getElementById("Gallery01").style.display = "flex";
}

Could be setup like this…

function Gallery(galleryId) {
        document.getElementById(galleryId).style.display = "flex";
}

Then of course instead of calling Gallery01() you could call Gallery('Gallery01');. Then with gallery 2 you would use Gallery('Gallery02');. Get the idea?

Same with g01Slide() would become something like gSlide('g01Slide', n);.

Another option you could do is build this gallery JS code into something like a class and then initialize the classes to instances of each exhibition gallery.

Either way, significant changes will have to be done to the code. Probably a bit more work than anyone here wants to put in.

skulptron · April 30, 2021, 6:15pm

OK. I didn’t know that it is so complicated… Thank you, I will try your suggestions.

skulptron · May 4, 2021, 11:12pm

I gave up with several galleries in one page and decided to try another way, but now I have a problem with previous and next buttons … Is it too complicated again in this case as well?

CODEPEN

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 > img {
    max-width: 90vw;
    max-height: 200px;
    cursor: zoom-in;
    display: block;
    padding: 6px; 
}
#modal-gall {
  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 {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}
#modal-slides {
    display: block;
    max-width:100%; 
    max-height: calc(100vh - 16px);
    margin: auto;
}
.closem {
  cursor: pointer;
  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;
  text-decoration: none;
}
.closem:hover,
.closem:focus {
  color: red;
  cursor: pointer;
}
.prevm,
.nextm {
  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;
  text-decoration: none;
}
.prevm {
  left: 0;
  border-radius: 0 5px 5px 0;
}
.nextm {
  right: 0;
  border-radius: 5px 0 0 5px;
}
.prevm:hover,
.nextm:hover {
  background-color: #322c42;
}

HTML

<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">
    <img src="gallery/2021-30/2021/01/pic-01.jpg" alt="Image description" onclick="popUp(this);">
    <img src="gallery/2021-30/2021/01/pic-02.jpg" alt="Image description" onclick="popUp(this);">
    <img src="gallery/2021-30/2021/01/pic-03.jpg" alt="Image description" onclick="popUp(this);">
    <img src="gallery/2021-30/2021/01/pic-04.jpg" alt="Image description" onclick="popUp(this);">
    <img src="gallery/2021-30/2021/01/pic-05.jpg" alt="Image description" onclick="popUp(this);">
  </div>
        <div id="modal-gall">
        <a href="javascript:void(0);" class="closem" onclick="closeM()">&times;</a>
        <div class="modal-content">
           <img id="modal-slides">
        </div>
          <a href="javascript:void(0);" class="prevm" onclick="slidering(-1)">&#10094;</a>
          <a href="javascript:void(0);" class="nextm" onclick="slidering(1)">&#10095;</a>
        </div>

</div>

JS

function closeM() {
  document.getElementById("modal-gall").style.display = "none";
}
function popUp(element) {
    document.getElementById("modal-gall").style.display = "flex";
    document.getElementById("modal-slides").src = element.src;
}

Thanx

PaulOB · May 5, 2021, 4:10pm

What is the problem exactly?

You don’t seem to have any js for the slider buttons yet.

Console

Uncaught ReferenceError: slidering is not defined

skulptron · May 5, 2021, 7:09pm

Hmm, well… That’s problem. I don’t know what code I should use for PREV and NEXT. I mixed these two galleries ( https://codepen.io/rdev-rocks/pen/KXNzvo
https://codepen.io/r3dg3cko/pen/ZLryQG ) to get what I need… But don’t know how to make code for buttons.

PaulOB · May 5, 2021, 8:59pm

You’d need most of the button code that you didn’t copy but changed to suit what you have.

If you add this your page after the existing JS it should work but I’m pretty amateurish at JS.

var slideIndex = 1;
function slidering(n) {
  showSlide((slideIndex += n));
}

function showSlide(n) {
  const slides = document.querySelectorAll(".gall-wrap img");

  if (n > slides.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = slides.length;
  }
  document.getElementById("modal-slides").src = slides[slideIndex - 1].src;
}

I’m not keen on all those inline event handlers either as the JS should be in the js file.

I’m wondering why you didn’t go with an ‘off the shelf’ lightbox rather than trying to re-invent the wheel?

Also you would usually show a smaller file size images for the thumbnails and then fetch the src of the larger modal image for display when required.

system · August 5, 2021, 3:59am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.