How to apply JavaScript function to multiple images
I am trying to create an image gallery, so when I click each image it opens above the page under the heading at the bottom.
I got it for the first image on the page, but can't figure out how to apply it to the rest of the images. Here's my HTML:
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" class="close"onclick="document.getElementById('myModal').style.display='none'">
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
And here's my JavaScript:
var modal = document.getElementById('myModal'); // Get modal
var img = document.getElementById('myImg'); // Get img for modal
var modalImg = document.getElementById("img01"); // Place image in modal
var captionText = document.getElementById("caption"); // Use alt for caption
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var close = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
I'm guessing because JavaScript only uses the first "identifier" it encounters, but I can't figure out how.
thank
source to share
Try it. Create a function and call it on onClick
your image element.
var modal = document.getElementById('myModal'); // Get modal
var img = document.getElementById('myImg'); // Get img for modal
var modalImg = document.getElementById("img01"); // Place image in modal
var captionText = document.getElementById("caption"); // Use alt for caption
/*img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}*/
function showImg(ele){
modal.style.display = "block";
modalImg.src = ele.src;
captionText.innerHTML = ele.alt;
}
var close = document.getElementsByClassName("close")[0];
/*span.onclick = function() {
modal.style.display = "none";
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<div class="col-md-4">
<div>
<a href="#projects">
<img id="myImg" onclick="showImg(this);" src="http://qlip.in/images/webbrandaxis.jpg"
alt="placeholder" style="width:100%; padding-bottom: 1em">
</a>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" class="close" onclick="document.getElementById('myModal').style.display='none'">
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
source to share
The identifier must be unique. So id="myImg1"
, id="myImg2
etc. If you want to reuse css classes use classes instead of ids. So change that to a class, select them all with document.getElementsByClassName
, iterate through that array, and set an event listener on all of the image objects.
source to share
In an HTML document, the ID must be unique and used only once. Use classes instead. You can use document.getElementsByClassName(classname)
or document.querySelectorAll(.classname)
to select all elements with a specific class. Then you will have to use a for-loop to iterate over the returned HTMLCollections.
source to share