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.

JavaScript JS Issue- 2nd lightbox not loading

Edrol97

Edrol97

Coder
Hi All,

Wondering what's up with my JS. I'm wanting to launch a second lightbox gallery alongside a first and wonder what I've done wrong. I'll attach my HTML and JS below as I'm not sure if either are right.

HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Image carousel</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<h1>The Headlines</h1>
   
<div class="container">
<div class="gallery1">
        <img src="img/Slide%20away.png" alt=" "width="300px" height="300px" onclick="LaunchLightbox(1)">
    </div>
   
    <div class="gallery2">
        <img src="img/Minute Books/Minute Books.png" alt=" "width="300px" height="300px" onclick="LaunchLightbox(2)">
    </div>
</div>
    <div class="slide-show_container">
        <div class="next_button" onclick="NextImage()">&#10233</div>
        <div class="previous_button" onclick="PreviousImage()">&#10232</div>
        <div class="close_button" onclick="CloseLightbox()">&#9746</div>
        <div class="image_slide" onclick="slides()"></div>
            
            <div class="image_slide">
                <img src="img/BA%20Exhibition%20View.png" width="400px">
                <div class="title_text">Politics 24/7?</div>
                <div class="caption_text">Come in. Take a seat! Make yourself at home, but something doesn't
                    feel quite right
                </div>
            </div>
            <div class="image_slide">
                <img src="img/Truly%20Brexish%20Summer.jpg" width="400px">
                <div class="title_text">A Very Brexish Summer</div>
                <div class="caption_text"> A display for the BCX 2019 show at the Bentall Centre. An ironic 
                    party in Brexit's dishonour</div>
                </div>
            <div class="image_slide">
                <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">Into the Gallery at South London Gallery, Leeds Art Gallery and The RA</div>
            </div>
            <div class="image_slide">
                <img src="img/MFA%20Final%20Show%203.jpg" width="400px">
                <div class="title_text">Pinocchio is nice at least</div>
                <div class="caption_text">A piñata to celebrate the former Prime Minister for what he was best at.
                </div>
            </div>
            <div class="image_slide">
                <img src="img/Exhibition%20Left%20Side%20Door%20View.png" width="400px">
                <div class="title_text">Party Politics</div>
                <div class="caption_text">Welcome to the party. Boris isn't invited</div>
            </div>
            
            <div class="image_slide">
                <img src="img/Bad%20Times%20logo%20Colourised%20A5.png" width="400px">
                <div class="title_text">Bad Times are here</div>
                <div class="caption_text">With the media in the state that it's in, it's no wonder</div>
            </div>
            <div class="image_slide">
                <img src="img/Failing%20Everyday%20A5.png" width="400px">
                <div class="title_text">Daily Fail</div>
                <div class="caption_text">The Daily Mail is a bastion... of real FAKE NEWS</div>
            </div>
            <div class="image_slide">
                <img src="img/Sadly%20Substandard%20A5.png" width="400px">
                <div class="title_text">A Very Standard State Of Affairs</div>
                <div class="caption_text">Mr Lebedev needs to brush up on the truth</div>
            </div>
            <div class="image_slide">
                <img src="img/A%20Bit%20Of%20A%20Mix%20Up.png"  width="400px">
                <div class="title_text">Rishi's getting a bit mixed up</div>
                <div class="caption_text">Culture wars might not be the godsend that Rishi Sunak thinks it will be</div>
            </div>
            <div class="image_slide">
            <img src="img/Blue%20Sky%20Thinking.png" width="300px">
            <div class="title_text">Blue Sky Thinking</div>
            <div class="caption_text">Rishi's Stop The Boats tactics don't seem to be working too well</div>
            </div>
            <div class="image_slide">
                <img src="img/Culture%20War%20On%20Woke.png" width="400px">
                <div class="title_text">GB News has no culture</div>
                <div class="caption_text">The Tories are looking for an election strategy and GB News has come to the rescue 
            providing them a desperately needed platform. It won't work.</div>
            </div>
            <div class="image_slide">
                <img src="img/Nothing%20to%20see%20here.png" width="400px">
                <div class="title_text">What has Rishi got to hide?</div>
                <div class="caption_text">They'll be hiding more and more come the election</div>
            </div>
            <div class="image_slide">
                <img src="img/Out%20of%20Tune%20ideas.png" width="400px">
                <div class="title_text">A Very Budget Cabinet Karaoke. </div>
                <div class="caption_text">No ideas incoming</div>
            </div>
            <div class="image_slide">
                <img src="img/Budget%20Fare.png" width="400px">
                <div class="title_text">They've Got A Ticket To Ride</div>
                <div class="caption_text">One way ticket to nowhere for the Tories</div>
            </div>
            <div class="image_slide">
                <img src="img/Mayday Maynay!.png" width="400px">
                <div class="title_text">Mayday Maynay!</div>
                <div class="caption_text">SOS It's over Rishi!</div>
            </div>
            <div class="image_slide">
                <img src="img/That's%20Racist.png" width="500px">
                <div class="title_text">Hester Festers</div>
                <div class="caption_text">The Frank Hester row wages on, as the Tories are embroiled in a racism row</div>
            </div>
            <div class="image_slide">
                <img src="img/Ofcom%20Offence.png" width="400px">
                <div class="title_text">GB Not News</div>
                <div class="caption_text">When will the self-appointed Government psychopants learn that lies must be punished?</div>
            </div>
            <div class="image_slide">
                <img src="img/Budget%20Budget.png" width="400px">
                <div class="title_text">The Budgetest of all Budgets</div>
                <div class="caption_text">This budget won't stretch far</div>
            </div>
            <div class="image_slide">
                <img src="img/Vultures%20Circling.png" width="300px">
                <div class="title_text">Very Nearly Dead Meat</div>
                <div class="caption_text"></div>
            </div>
        <div class="image_slide"> 
            <img src="img/Double%20Standards.png" width="400px">
            <div class="title_text">Lionising Stupidity</div>
            <div class="caption_text">Everyone's going mental over the England kit.</div>
            </div>
        
        <div class="image_slide">
            <img src="img/Cross Wires.png" width="400px">
            <div class="title_text">Cross Wires</div>
            <div class="caption_text">Both Russian leadership and ISIS are made up of angry men, but this is 
                something I didn't predict
            </div>
        </div>
        <div class="image_slide">
            <img src="img/Nothing but Kate.png" width="250px">
            <div class="title_text">With Apologies to Matt Groening</div>
            <div class="caption_text">Princess of Wales Kate has been diagnosed with Cancer. I'm sorry, but millions
            are going through what she is going through with far less support. It shouldn't be headline news
            </div>
        </div>

        </div>
<div class="slide-show_2container">
    <div class="next_button" onclick="NextImage()">&#10233</div>
    <div class="previous_button" onclick="PreviousImage()">&#10232</div>
    <div class="close_button" onclick="CloseLightbox()">&#9746</div>
    <div class="image_slide" onclick="slides()"></div>
    <div> <img src="img/Minute Books/Minute Books.png"></div>
    
    <div class="image_slide">
        <img src="img/Minute Books/Minute Books 01:2019.png" alt="">
    </div>
    <div class="image_slide">
        <img src="img/Minute Books/Minute Books 15:01.png"></div>
</div>







</div>
    

    <script src="script.js"></script>
  </body>
</html>


JavaScript: 
let slides = document.getElementsByClassName("image_slide");

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

    }
    slides[counter].style.display="block";
}


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

function LaunchLightbox(num){
    if(num==1){
        
        let Lightbox= document.getElementsByClassName("slide-show_container");
        Lightbox[0].style.display="block";

    }
    if(num==2){
        let Lightbox= document.getElementsByClassName("slide-show_2container");
        Lightbox[0].style.display="block";


    }
    
}

let ImageSlides = document.getElementsByClassName("ImageSlide")
let TotalImages=3
ImageSlides[counter].style.display=block;
function NextImageSlide(){
    for (let i=0;i<TotalImages+1;i++){
        ImageSlides[i].style.display="none";}

    }

    counter=counter+1;
    if (counter > TotalImages){
        counter=1;
    
    }

  

function Close_Lightbox(){
    let Lightbox= document.getElementsByClassName("slide-show_container","slide-show_2container");
    Lightbox[0].style.display="none"

}
 
Sort by date Sort by votes
let ImageSlides = document.getElementsByClassName("ImageSlide")
let TotalImages=3

let totalimages=22

I am seeing these do not have semicolons, fix them then look for errors in console. First number should be line, like line 47, second where on that line, 1. That error does not seem to correspond to anything and I do not know of another script so try with semicolons and search for space in your HTML. Some errors are caused by code way before them. X E.
 
Upvote 0 Downvote
JosiahMaybe said:
let ImageSlides = document.getElementsByClassName("ImageSlide")
let TotalImages=3

let totalimages=22

I am seeing these do not have semicolons, fix them then look for errors in console. First number should be line, like line 47, second where on that line, 1. That error does not seem to correspond to anything and I do not know of another script so try with semicolons and search for space in your HTML. Some errors are caused by code way before them. X E.
Click to expand...
In JavaScript, the code will still run if semicolons omitted. Unless multiple statements are put onto the same line.


Not sure if this is the problem, but it seems the minimum value your counter variable will ever be is 1.
Note that in JavaScript (and most programming languages), array indexes start from 0, so if you want to select the first element in an array of elements, counter will have to be 0.
 
Upvote 0 Downvote
Johna said:
In JavaScript, the code will still run if semicolons omitted. Unless multiple statements are put onto the same line.


Not sure if this is the problem, but it seems the minimum value your counter variable will ever be is 1.
Note that in JavaScript (and most programming languages), array indexes start from 0, so if you want to select the first element in an array of elements, counter will have to be 0.
Click to expand...
Thanks for this. Wondering also re differentiation between lightboxes in JS. I can launch both lightboxes but both sets of arrows I have function only with the first lightbox gallery. My CSS is below for the full code

CSS: 
@font-face {
    font-family: Eliot Lord;
    src: url(Fonts/EliotlordhandRegular.ttf);
}
body
{
    font-family: Eliot Lord;
}
.title_text{
font-size: 32pt;
font-weight: bold;
}
.caption_text{
font-size: 25pt;
}
.image_slide{
    display: none;
}
.slide-show_container {
    display: block;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    position: relative; 
}
.image_slide{
    height: 100%;
    width: 700px;
    overflow: hidden;
    position:relative
}
.caption_text{
    height: 100%;
    width: 100%;
}

.w3-btn-floating > img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    height: 45px;
    width: 45px;
    color: white;
}

.w3-btn-floating {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    height: 45px;
    width: 45px;
    color: white;
}


.slide-show_container {
    display: none;
}
  .previous_button,
  .next_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    position: absolute;
    align-items: center;
    cursor: pointer;
    font-size: xx-large;
  }
  
  .previous_button {
    left: 100px;
      
  }
  
  .next_button {
    right: 810px;
    
    
  }
    .close_button {
        right: 940px;
        font-size: xx-large;
        top: 30%;
        cursor: pointer;
    }
    .container {
        cursor: pointer;
        height: 350px;
        width: 100%;
    }
    
    .gallery1, .gallery2, .gallery3{
        float: left;
    }
    .slide-show_2container{
        display: none;
    }
 
Upvote 0 Downvote
The error you get can't be related to the script you posted. At or around line 47 there is nothing that could trigger this error. So I don't know what it means either.

Both your HTML and IS are peppered with errors. Make a habit of checking your HTML in the W3C Online Validator and your JS in the BeautifyTools Javascript Validator. Fix all the errors even if they don't seem very important. Let's see what we have after that. If you still get an error, try at least to find and post the source at that location.

The missing semicolons are not fatal, JS is quite forgiving about this. But it's sloppy programming. If you don't get the basic things right, all your code becomes suspect.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom