Images does not show in Lightbox module on click



  • I have a mine consisting of 12 projects. Onclick a lightbox module is supposed to pop up and show one or multiple images

    No matter what I do, this lightbox module is not showing my "src" images. On click the module pops up, with an image "placeholder", but not the actual image and this is the case for all of the projects.

    I've been double-checking and all of the images are linked correctly. I've been doing quite a bit of fidgetting around, and at one point an image would show, upon clicking for example project 1 or 2 - only it would not be the correct one. Instead, when I was investigating the page in chrome I noticed that project 1 actually displayed the image designated project 3. but at this point nothing is showing. I am only writing it as it might be an indicator of the source problem.

    I have decided to pretty much paste in the entire code

    <script>
            var modal = document.getElementById("myModal_1");
            var btn = document.getElementById("myBtn_1");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
    
     <script>
            var modal = document.getElementById("myModal_2");
            var btn = document.getElementById("myBtn_2");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
    
     <script>
            var modal = document.getElementById("myModal_3");
            var btn = document.getElementById("myBtn_3");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
    
     <script>
            var modal = document.getElementById("myModal_4");
            var btn = document.getElementById("myBtn_4");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
    
     <script>
            var modal = document.getElementById("myModal_5");
            var btn = document.getElementById("myBtn_5");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_6");
            var btn = document.getElementById("myBtn_6");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_7");
            var btn = document.getElementById("myBtn_7");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_8");
            var btn = document.getElementById("myBtn_8");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_9");
            var btn = document.getElementById("myBtn_9");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_10");
            var btn = document.getElementById("myBtn_10");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
    
     <script>
            var modal = document.getElementById("myModal_11");
            var btn = document.getElementById("myBtn_11");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    
    
     <script>
            var modal = document.getElementById("myModal_12");
            var btn = document.getElementById("myBtn_12");
            var span = document.getElementsByClassName("close")[0];
    
                    btn.onclick = function() {
                      modal.style.display = "block";
                    }
    
                    span.onclick = function() {
                      modal.style.display = "none";
                    }
    
                    window.onclick = function(event) {
                      if (event.target == modal) {
                        modal.style.display = "none";
              }
            }
    </script>
    
    .modal {
      display: none; 
      position: fixed; 
      z-index: 1; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
    }
    
    
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; 
      padding: 20px;
      border: 1px solid #888;
      width: 80%; 
    }
    
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
    
    <ul style="list-style: none;">
    
    
        <li class="Project">
              
                    <span id="myBtn_1">
                        Wer Baut Der Stadt
    
                        <span id="year"> 
                            2019
                        </span>
                    </span>
    
                        <div class="Describtion">
                            <p style="display:none;">
                            Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                            </p>
                        </div>
    
                         <div id="myModal_1" class="modal">
                            <div class="modal-content">
                                <img src="Images/WER BAUT 2018/Poster 7-11.pdf">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..
                                </p>
                            </div>
                        </div>
        </li>
            
       
    
    
       
    
            <li class="Project">
              
                    <span id="myBtn_2">
                         Hans Oscar Carlsson
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
             
                    <div class="Describtion">
                        <p style="display:none;">
                        Webpage for curator and critic Hans Oscar Carlsson
                	   </p>
                    </div>
                    
                     <div id="myModal_2" class="modal">
                        <div class="modal-content">
                           <img src="Images/Newsarticle/_97A0846.jpg" width="800px">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..
                                </p>
                        </div>
                    </div>
    
            </li>
    
    
    
    	
            <li class="Project">
    
                    <span id="myBtn_3">
                         Atelier Toer
    
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
        
                    <div class="Describtion">
                        <p style="display:none;">
                        Webpage for Atelier Toer
                	   </p>
                    </div>
    
                        <div id="myModal_3" class="modal">
                            <div class="modal-content">
                            	 <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
                                    <span class="close">&times;
                                    </span>
                                    <p>Some text in the Modal..
                                    </p>
                            </div>
                        </div>
    
    	    </li>
    
    
    
    	<li class="Project">
            
                    <span id="myBtn_4">
                         Wer Baut Der Stadt?
                        <span id="year"> 
                            2019
                        </span>
                    </span>
        
    
                    <div class="Describtion">         
                        <p style="display:none;">
                   	    Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin in 2018.	
                	   </p>
                    </div>   
    
    
                     <div id="myModal_4" class="modal">
                            <div class="modal-content">
                            	<img class=WerBaut src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
    	                            <span class="close">&times;
    	                            </span>
    	                            <p>Some text in the Modal..
    	                            </p>
                            </div>
                    </div>
        </li>
    
    
    
    
    	<li class="Project">
            
                    <span id="myBtn_5">
                         CAFX 2018
                        <span id="year"> 
                            2019
                        </span>
                    </span>
                    
    
                    <div class="Describtion">
                        <p style="display:none;">
                       	Identity design for Copenhagen Architecture Festival 2018.	
                    	</p>
                    </div>
    
                    <div id="myModal_5" class="modal">
                            <div class="modal-content">
                            	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                            <span class="close">&times;
    	                            </span>
    	                            <p>Some text in the Modal..</p>
                            </div>
                    </div>
        </li>
    
    
    
    
    
        <li class="Project">
    
                    <span id="myBtn_6">
                         Mette Riis
    
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
             
        
                    <div class="Describtion">
                        <p style="display:none;">
                        Webpage for artist and researcher Mette Riis.	
                        </p>
                    </div>
    
                    <div id="myModal_6" class="modal">
                        <div class="modal-content">
                        	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                            <span class="close">&times;
    	                            </span>
    	                            <p>Some text in the Modal..
    	                            </p>
                            </div>
                    </div>
         </li>
    
    
    
    	   <li class="Project">
    
                     <span id="myBtn_7">
                            Contagious Tales
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
           
    
                    <div class="Describtion">
                        <p style="display:none;">
                       	 Graduation project, editorial design	
                    	</p>
                    </div>
    
                    <div id="myModal_7" class="modal">
                        <div class="modal-content">
                        	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                            <span class="close">&times;
    	                            </span>
    	                            <p>Some text in the Modal..
    	                            </p>
                        </div>
                    </div>
    
            </li>
    
    
    	   <li class="Project">
             
                    <span id="myBtn_8">
                            Foam X Hydra
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
                    <div class="Describtion">
                        <p style="display:none;">
                       	Design of exhibition cahier in connection to the exhibition FOAM X HYDRA.	
                    	</p>
                    </div>
    
                    <div id="myModal_8" class="modal">
                        <div class="modal-content">
                        	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                            <span class="close">&times;
    	                            </span>
    	                            <p>Some text in the Modal..
    	                            </p>
                        </div>
                    </div>
    
    
            </li>
    
    	
    
    
    	   <li class="Project">
    
                     <span id="myBtn_9">
                            What Is The News Article?
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
    
                    <div class="Describtion">
                        <p style="display:none;">
                       	 Pamphlet with infographics.	
                    	</p>
                    </div>
    
    
                    <div id="myModal_9" class="modal">
                        <div class="modal-content">
                        	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..
                                </p>
                        </div>
                    </div>
    
            </li>
    
    
    
    	   <li class="Project">
    
                    <span id="myBtn_10">
                            Money Can No Longer Buy
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
    
                    <div class="Describtion">
                        <p style="display:none;">
                       	Book.	
                    	</p>
                    </div>
    
    
                    <div id="myModal_10" class="modal">
                        <div class="modal-content">
                            <span class="close">&times;
                            </span>
                            <p>Some text in the Modal..
                            </p>
                        </div>
                    </div>
    
            </li>
    
    
    
            <li class="Project">
            
                    <span id="myBtn_11">
                          Questionnarie on Individuality
    
                        <span id="year"> 
                                2019
                        </span>
    
                    </span>
            
    
                        <div class="Describtion">
                            <p style="display:none;">
                            Litography on napkins.  
                            </p>
                        </div>
    
    
                        <div id="myModal_11" class="modal">
                                <div class="modal-content">
                                	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                                <span class="close">&times;
    	                                </span>
    	                                <p>Some text in the Modal..
    	                                </p>
                            </div>
                        </div>
    
            </li>
    
    
    
        <li class="Project">
    
                
                    <span id="myBtn_12">
                          Wordshuffler Posters
    
                        <span id="year"> 
                            2019
                        </span>
    
                    </span>
    
                        <div class="Describtion">
                            <p style="display:none;">
                            Posters. 
                            </p>
                        </div>
    
                        <div id="myModal_12" class="modal">
                            <div class="modal-content">
                            	<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
    	                                <span class="close">&times;
    	                                </span>
    	                                <p>Some text in the Modal..
    	                                </p>
                            </div>
                        </div>
        </li>
        
    
    </ul>


  • @cthornval

    There might several things that contribute to images not displaying.

    I would focus on one at a time. The markup is slightly off. I would recommend setting up each li element in the following way:

    <li class="Project" data-modal="myModal_1">
    
                        <span id="myBtn_1">
                            Wer Baut Der Stadt
                        </span>
    
                        <span id="year">
                            2019
                        </span>
    
                        <div class="Describtion">
                            <p style="display:none;">
                              Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                            </p>
                        </div>
    
                         <div id="myModal_1" class="modal">
                            <div class="modal-content">
                                <img src="Images/Newsarticle/image1.jpg">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..1
                                </p>
                            </div>
                        </div>
              </li>
    

    Then in your javascript I would delete everything and start fresh with just the following code:

    window.onload = function () {
      list = document.querySelectorAll(".Project");
      for (let i = 0; i < list.length; i++) {
        list[i].addEventListener("click", function (e) {
            e.preventDefault();
            let currentElement = e.target.parentNode;
            let modalId = currentElement.dataset.modal;
            let modal = document.getElementById(modalId);
            modal.style.display = "block";
        });
      }
    };
    

    Then I would start off with a simple image file to display. No pdf and nothing with spaces in the name of directory path. So something like this "Images/Newsarticle/image1.jpg"

    Chose a different image for each modal in the li elements.

    Once this part works I would move on to coding the rest.



  • @cthornval

    There might several things that contribute to images not displaying.

    I would focus on one at a time. The markup is slightly off. I would recommend setting up each li element in the following way:

    <li class="Project" data-modal="myModal_1">
    
                        <span id="myBtn_1">
                            Wer Baut Der Stadt
                        </span>
    
                        <span id="year">
                            2019
                        </span>
    
                        <div class="Describtion">
                            <p style="display:none;">
                              Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                            </p>
                        </div>
    
                         <div id="myModal_1" class="modal">
                            <div class="modal-content">
                                <img src="Images/Newsarticle/image1.jpg">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..1
                                </p>
                            </div>
                        </div>
              </li>
    

    Then in your javascript I would delete everything and start fresh with just the following code:

    window.onload = function () {
      list = document.querySelectorAll(".Project");
      for (let i = 0; i < list.length; i++) {
        list[i].addEventListener("click", function (e) {
            e.preventDefault();
            let currentElement = e.target.parentNode;
            let modalId = currentElement.dataset.modal;
            let modal = document.getElementById(modalId);
            modal.style.display = "block";
        });
      }
    };
    

    Then I would start off with a simple image file to display. No pdf and nothing with spaces in the name of directory path. So something like this "Images/Newsarticle/image1.jpg"

    Chose a different image for each modal in the li elements.

    Once this part works I would move on to coding the rest.



  • This worked wonderfully! I ended up using both codes!


Log in to reply