Yumiyahachiman

OMG! It works ... well that was easy I considered "image fit" to be out of the loop because of the fit part ... I changed all the image stuff back to demo, now it works Thank you very much for your patient... you have been a rock sensei!

Sensei, Some additional research points out 1* "The most important attribute of the <a> element is the href attribute, which indicates the link's destination." So like you say I cannot use the anchor. 2* img only has one attribute: src 3* "The <div> tag is used to group block-elements to format them with CSS." But in haiskar's example it works so... so in short replace the a's by div's as in the example by hariskar: from: <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4277.jpg" alt="Endless Earth"></a> <header> <h3>Endless Earth</h3> </header> </article> to: <article class="item"> <div class="image fit"><img class="image" src="images/IMG_4277.jpg" alt="Endless Earth"></div> <header> <h3>Endless Earth</h3> </header> </article> I'm guessing that is not what you mean, cause it doesn't change anything... any more tips for this baboon unworthy of your teachings?

So the last few days I've been trying to figure it out with what you've told me but... Here's my thinking process: // Get the modal - creating the variable "modal" var modal = document.getElementById('myModal'); this refers to: <!-- The Modal --> <div id="myModal" class="modal"> Create var images = a document with my 12 pictures (with class "image"): // Get the image and insert it inside the modal - use its "alt" text as a caption var images = document.getElementsByClassName("image"); Clicking on one of the images starts the function showCaption: for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;} The function calls the modal and (here I'm not sure) says the modal image is the src from modalImg function showCaption(){ modal.style.display = "block"; modalImg.src = this.src;} The var modalImg is a doc filled with img01 var modalImg = document.getElementById("img01"); Here we have img01 defined (and I think this is where I screw up). I've tried adding src="", I've tried adding src="images/pic07.jpg" (so with image linked), I've tried adding class"image", nothing works. I believe I have te refer to the images here somehow, just can't figure out how ... Hariskars example above seems to refer to a random src... <!-- Modal Content (The Image) --> <img src="" alt="" class="modal-content" id="img01"> And the rest is for closing and adding the caption... // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() {modal.style.display = "none";} modal.onclick = function() {modal.style.display = "none";} <!-- The Close Button --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div>

ok, so I think I followed all instructions so far. It opens the modal for every image I click on, but it doesnt show an image, it shows the broken image icon. // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var images = document.getElementsByClassName("image"); for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;} var modalImg = document.getElementById("img01"); function showCaption(){ modal.style.display = "block"; modalImg.src = this.src;} // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() {modal.style.display = "none";} modal.onclick = function() {modal.style.display = "none";}

1) Thank you, I forgot to change that one demo. 2) isn't this part supposed to run the showcaption: for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;} Only changing the "demo" to "image" for the img variable doesn't solve it I'm a beginner, so sorry if I'm a bit slow to understand.

I tried implementing the above into my code, but it doesn't work, is there anybody who can see where I messed up? html: <!-- Portfolio --> <section id="portfolio" class="two"> <div class="container"> <header> <h2>Portfolio</h2> </header> <p>Hieronder vind je een groepering van mijn favoriete werk. Wil je al mijn werk zien en in de toekomst niets meer missen volg me dan op social media. Je vindt de verschillende links terug onderaan het navigatiepaneel.</p> <div class="row"> <div class="4u 12u$(mobile)"> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4277.jpg" alt="Endless Earth" /></a> <header> <h3>Endless Earth</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_5389.jpg" alt="De Melle" /></a> <header> <h3>De Melle</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_0550.jpg" alt="Capreolus capreolus" /></a> <header> <h3>Capreolus capreolus</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4316.jpg" alt="The Calm" /></a> <header> <h3>The Calm</h3> </header> </article> </div> <div class="4u 12u$(mobile)"> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_3143_V2.jpg" alt="De Flaes" /></a> <header> <h3>De Flaes</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4050.jpg" alt="Vroege Grazer" /></a> <header> <h3>Vroege Grazer</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4035.jpg" alt="Early Mornings" /></a> <header> <h3>Early Mornings</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4758.jpg" alt="King Fisher Back Pose" /></a> <header> <h3>King Fisher Back Pose</h3> </header> </article> </div> <div class="4u$ 12u$(mobile)"> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_7110.jpg" alt="Verboden Toegang" /></a> <header> <h3>Verboden Toegang</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_6985.jpg" alt="Het Schildershoekje" /></a> <header> <h3>Het Schildershoekje</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_4310.jpg" alt="Trees in the clouds" /></a> <header> <h3>Trees in the clouds</h3> </header> </article> <article class="item"> <a class="image fit"><img class="image" src="images/IMG_7487.jpg" alt="De Hoge Venen" /></a> <header> <h3>De Hoge Venen</h3> </header> </article> </div> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01" alt=""> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div> </section> javascript: // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementsByClassName("demo"); for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;} var modalImg = document.getElementById("img01"); function showCaption(){ modal.style.display = "block"; modalImg.src = this.src;} // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() {modal.style.display = "none";} modal.onclick = function() {modal.style.display = "none";}