W3 Schools Lightbox Issue

Hello, everyone!

I am currently using the w3 schools tutorial on Lightbox to create a lightbox display for a project I am working on. However, when I go to insert the following code, I am met with a number of errors. The “var i” code throws an error no matter what. This is incredibly frustrating lol. Any help or tips is greatly appreciated. Thank you!

There are no errors outside of this function block

function showSlides(n) {

var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"
}
for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "")
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;


</script>

Where’s the closing curly brace n the showSlides function?

It was placed to close the function prior to the function closing tag prior to uploading this, however, it still reulted in errors

I don’t see a closing curly brace in the code you pasted above. Are you saying that you do have one but you just didn’t include it in your pasted code?

Yes. After your comment I went back and it looks like the errors are now gone for some reason? I will update here soon, I apologize for the confusion.

So now; my script is working and not throwing errors. However, when I click on an image, the lightbox, isnt working how Id want it to; below will be two images, showing the hover, and then what happens when the image is clicked.


There is really no way we can troubleshoot this for you without seeing all of your code: HTML, CSS, and JS.

You’ll need to give us much more detail about how you want it to work.

So I would ideally like the image to pop-up when clicked, and display the alt text towards the bottom of the display. I will provide all of my HTML and CSS below;

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dans' Dex</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    <script src="logic.js"></script>

</head>
<body>



<div class="heading">
    <h1 class="title">
        Dans' Dex
    </h1>

</div>

<div class="names">

    <h3>
001 Bulbasaur
    </h3>

    <h3>
002 Ivysaur   
    </h3>

    <h3>
    003 Venusaur   
    </h3>

    
    
</div>


<div class="images">

    <img src="images/please.png" onclick="openModal();currentSlide(1)" class="hover-shadow">
    <img src="images/ivyyy.png" onclick="openModal();currentSlide(2)" class="hover-shadow">
    <img src="images/vennn.png" onclick="openModal();currentSlide(3)" class="hover-shadow">

</div>


<div class="names">
<h3>004 Charmander</h3>
<h3>005 Charmeleon </h3>
<h3>006 Charizard</h3>
</div>

<div class="images">

<img src="images/charm.png" onclick="openModal();currentSlide(4)" class="hover-shadow">
<img src="images/charmeleon.png"  class="hover-shadow" onclick="openModal();currentSlide(5)">
<img src="images/charizard.png"   class="hover-shadow" onclick="openModal();currentSlide(6)">

</div>

<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">

        <div class="mySlides">
            <div class="numbertext">1 / 4</div>
            <img src="images/please.png" style="width:100%">
          </div>
          <div class="mySlides">
            <div class="numbertext">2 / 4</div>
            <img src="images/ivyyy.png" style="width:100%">
          </div>
          <div class="mySlides">
            <div class="numbertext">3 / 4</div>
            <img src="images/vennn.png" style="width:100%">
          </div>
          <div class="mySlides">
            <div class="numbertext">4 / 4</div>
            <img src="images/charm.png" style="width:100%">
          </div>
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
          <div class="caption-container">
            <p id="caption">Test Test</p>
          </div>
          <div class="column">
            <img class="demo" src="images/please.png" onclick="currentSlide(1)" alt="Bulbasaur">
          </div>
          <div class="column">
            <img class="demo" src="images/ivyyy.png" onclick="currentSlide(2)" alt="Ivysaur">
          </div>
          <div class="column">
            <img class="demo" src="images/vennn.png" onclick="currentSlide(3)" alt="Venusaur">
          </div>
          <div class="column">
            <img class="demo" src="images/charm.png" onclick="currentSlide(4)" alt="Charmander">
          </div>
        </div>
      </div>


</div>

</body>
</html>

css:

.heading{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #3c5aa6;
    
}

.heading .title{
font-family:cursive;    color: white;
}

.names{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background:whitesmoke;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 75%;
}


.images{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background:#3c5aa6;
   


}

.uno{
height:50%;
width:50%
}


.row > .column {
    padding: 0 8px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;}

    .column {
        float: left;
        width: 25%;
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: black;
      }

      .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        width: 90%;
        max-width: 1200px;
      }

      .close {
        color: white;
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 35px;
        font-weight: bold;
      }

      .close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
    display: none;
  }

  .prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  .prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
  }

  img.demo {
    opacity: 0.6;
  }
  
  .active,
.demo:hover {
  opacity: 1;
}


.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

Can’t test it without this code :slightly_smiling_face:

So I actually placed that tag in the heading, the CSS & JS should already be linked

You need to paste all of the JS in that file in here. I can’t see it since it’s on your computer :slightly_smiling_face:

Gotcha my apologies, I thought i had already linked my JS; it will be below!

// Open the Modal
function openModal() {
    document.getElementById("myModal").style.display = "block";
  }
  
  // Close the Modal
  function closeModal() {
    document.getElementById("myModal").style.display = "none";
  }
  
  var slideIndex = 1;
  showSlides(slideIndex);
  
  // Next/previous controls
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  // Thumbnail image controls
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
  }

The first thing I am noticing is a JS error in the console on initial page load:

Uncaught TypeError: slides[(slideIndex - 1)] is undefined

You’ll want to fix that first. Once you do, please be sure to paste in your updated JS.

Okay I will attempt to fix this now and reach back out soon with my updated code

For some reason, Im not seeing this error in my console

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