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