Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

Edrol97

Well-Known Coder
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

HTML:
<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>


JavaScript:
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";
}
 
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.
 
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
 

Buy us a coffee!

Back
Top Bottom