HTML & CSS Confused about the creation of multiple image galleries opening in individual popups overlaying the entire page

[Edrol97]

Hi all, currently my code has various slide show galleries opening in individual lightboxes. However these lightboxes don't currently overlay the entire page as I would like. How do I alter my Javascript in order to enable this? See below

<div class="slide-show_containers">
            <div class="slide-show_1container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(1)">&#9746</div>
               <div class="image_slide1">
                  <img src="img/New%20Contemps%202019.png" width="400px">
                  <div class="title_text">Boris Can't Get Clean, however much he tries</div>
                  <div class="caption_text"><span style="background-color: white;">Into the Gallery at South London Gallery, Leeds Art Gallery and The RA</span></div>
               </div>
<div class="slide-show_3container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(3)">&#9746</div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/Artonapostcardlogo.png">
                  <div class="caption_text"><span style="background-color: white;">I appeared in Art On A Postcard's Secret Summer Auction 2020 where my work was slated
                     as being astoundingly basic political messaging by Time Out Magazine</span>
                  </div>
<div class="slide-show_7container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(7)">&#9746</div>
               <div class="image_slide7">
                  <img src="img/BA/Kingston Degree show logo.png" width="400px">
                  <div class="title_text">This is not a Show, It's a Living Room</div>
                  <div class="caption_text"><span style="background-color: white;">Prepare to enter Eliot Lord's (House of Lord's) space in the Kingston Fine Art Degree Show</span></div>
               </div>

let slides=[];
let lightbox = [];
let counter=0;
let totalimages=0;

function NextImage(){
    for (let i=0;i<totalimages;i++){
        slides[i].style.display="none";
    }
    counter=counter+1;
    if (counter > (totalimages-1)){
        counter=0;
    }
    slides[counter].style.display="block";
}

function PreviousImage(){
    for (let i=0;i<totalimages;i++){
      slides[i].style.display="none";
    }
    counter=counter-1;
    if (counter < 1){
      counter=totalimages;
    }
    slides[counter].style.display="block";
}

function HideImages(){
  for (let i=0;i<totalimages;i++){
    slides[i].style.display="none";
  }
}

function LaunchLightbox(num){
  lightboxcontainer=document.getElementsByClassName("slide-show_containers");
  lightboxcontainer[0].style.display="block";
    counter=0;
    slides=document.getElementsByClassName("image_slide" + num.toString());
    lightbox= document.getElementsByClassName("slide-show_" + num.toString() + "container");
    lightbox[0].style.display="block";
    slides[counter].style.display="block";
    totalimages=slides.length;
    console.log(slides);
    console.log(totalimages);
}

function CloseLightbox(num){
  HideImages()
  lightbox = document.getElementsByClassName("slide-show_" + num.toString() + "container");
  lightbox[0].style.display="none";
  lightboxcontainer=document.getElementsByClassName("slide-show_containers");
  lightboxcontainer[0].style.display="none";
}

 

[tomliv]

I am not seeing anything in your script that would cause the light boxes to be on top of (overlay) the remaining content of your page. I can see display:block being added, which is fine but it will still be in the flow of your document. You would need to add additional styles to the Lightbox to cause it to overlay the other content on the page. Is the Lightbox your own? Are there additional styles for it? I'd look there.

 

[Edrol97]

I am not seeing anything in your script that would cause the light boxes to be on top of (overlay) the remaining content of your page. I can see display:block being added, which is fine but it will still be in the flow of your document. You would need to add additional styles to the Lightbox to cause it to overlay the other content on the page. Is the Lightbox your own? Are there additional styles for it? I'd look there.

Hi Tom, the lightbox is my own. How would I make it overlay? What additional styles could be used. I am quite confused by this and have been looking for a while

 

[tomliv]

Here is a quick sample:

https://codepen.io/tomliv/pen/VwNEgxg