Can't open multiple modal images on javascript

Question

CREATED A FIDDLE HERE: https://jsfiddle.net/jqqn2gg7/

I posted a fiddle above about my issue. If you go to "Bunny1" you can hover on the bunnies and you'll see that you can open the first one, but the second one won't even budge. I tried everything, even the first bunny stopped working. Went back to working thou.

What is missing here?

I also tried to use "Escape" button to close instead of only the "X" button.

I'll post my issue code here:

<div class="content-lg container">
  <div class="toolbar mb2 mt2">
    <button class="btn fil-cat" href="" data-rel="all"><i class="fa fa-star-o" aria-hidden="true"></i> All</button>
    <button class="btn fil-cat" data-rel="bunny1">bunny1</button>
    <button class="btn fil-cat" data-rel="bunny2">bunny2</button>
    <button class="btn fil-cat" data-rel="bunny3">bunny3</button>
    <button class="btn fil-cat" data-rel="bunny4">bunny4</button>
    <button class="btn fil-cat" data-rel="bunny5">bunny5</button>
  </div>

  <div id="portfolio">
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="Toldos Algarve" width="300" height="200">
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">

      <!-- The Close Button -->
      <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

      <!-- Modal Content (The Image) -->
      <img class="modal-content" id="img01">

      <!-- Modal Caption (Image Text) -->
      <div id="caption"></div>
    </div>
    <div id="myModal" class="modal">

      <!-- The Close Button -->
      <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

      <!-- Modal Content (The Image) -->
      <img class="modal-content" id="img02">

      <!-- Modal Caption (Image Text) -->
      <div id="caption"></div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

And the javascript:

$(function() {
  var selectedClass = "";
  $(".fil-cat").click(function() {
    selectedClass = $(this).attr("data-rel");
    $("#portfolio").fadeTo(100, 0.1);
    $("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("." + selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300);

  });
});

// DAT GALLERY

// 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.getElementById('myImg');
var modalImg = document.getElementById("img01");
var modalImg2 = document.getElementById("img02");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg2.src = this.src;
  captionText.innerHTML = this.alt;
}

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

// end of gallery

It's opening bunny 1-3 fine, (4-5 not working) – Dominic Aug 23 '17 at 08:58 — Dominic, Aug 23 '17 at 08:58
JavaScript 101: ID's must be unique (one per a document.) – Adam Azad Aug 23 '17 at 09:00 — Adam Azad, Aug 23 '17 at 09:00

score 1 · Answer 1 · answered Aug 23 '17 at 09:02

1

You can use getElementsByClassName instead of getElementById.

Check this fiddle: fiddle

answered Aug 23 '17 at 09:02

Ivan Minakov

1,432
7
12

Ohhhh dear... I forgot I was using an ID! I knew it was something so simple haha! – Undynemite Aug 23 '17 at 09:18

Kylie · Accepted Answer · 2017-08-23T09:13:59.167

Its because you're singling out only one of the images using getElementByID, and ID only applies to one. You cant have multiple ID's with the same ID.

Also... since you're using jquery in the top section, might as well stick with it, and not use vanilla js for the rest. So just do this and it should be good.

// Apply click handler to all tile elements,
$('.tile').click(function(){
   // Get image inside tile element
  var img = $(this).find('img');
  // Update modal with image data
  $("#img01").attr('src', img.attr('src'));
  $("#img02").attr('src', img.attr('src'));
  $('#caption').html(img.attr('alt'));
  $('#myModal').css('display','block');
});

// Close modal
$('.close').click(function(){
  $('#myModal').css('display','none');
})

Much more consistent and concise this way.

Also give the .tile class, cursor pointer, so that it appears you can click on it.

 .tile { cursor:pointer; }

SEE FIDDLE

It works perfectly!! Thank you so much!! I knew it was something so simple yet I couldn't just read it anyways... I am working on an awning factory and there's noise everywhere, not to mention I have to pickup the phone and deal with bills... hard to focus (it's not an excuse, I swear haha) — Undynemite, Aug 23 '17 at 09:18

Can't open multiple modal images on javascript

2 Answers2