Jump to content

Yumiyahachiman

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Yumiyahachiman

    Image gallery, modal opens only for first image

    in JavaScript

    Posted · Edited by Yumiyahachiman

    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?

     

    Image gallery, modal opens only for first image

    in JavaScript

    Posted

    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>

    Image gallery, modal opens only for first image

    in JavaScript

    Posted

    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";}

    Image gallery, modal opens only for first image

    in JavaScript

    Posted · Edited by Yumiyahachiman

    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";}
×
×
  • Create New...