Just wondering if anyone can help please?
I've created a page of modal images by following this tutorial: http://www.w3schools.com/howto/howto_css_modal_images.asp
I've also managed to include multiple images on the same page by creating unique identifiers for the myModal, myImg and img01 identifiers so that I can have multiple images on the same page so it will open in separate modal windows with the image displayed.
However, I'm having an issue where I can't seem to add a download link to a file for each image? Ideally, I would like the download link to show inside the modal panel along with the image and the alt text description. This is what I have so far but when I click on the download link, it appears to be the same download link for all the images instead of a different download link for each image?
Is it possible to do the above? And if so, what do I need to change in my code below? It would be great if someone could write in the changes clearly as I'm not that great with coding as I'm just a beginner.
Hopefully I've explained myself clearly and any assistance would be greatly appreciated.
<img id="myImg1" src="test1.png" alt="Test image 1" width="95" height="146">
<img id="myImg2" src="test2.png" alt="Test image 2" width="95" height="146">
<!-- The Modal -->
<div id="myModal1" class="modal">
<a href="test.pdf">Download PDF</a>
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption">
<div id="caption1"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption1");
img.onclick = function(){
modal.style.display = "block";
modalImg.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";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<div id="myModal2" class="modal">
<a href="test2.pdf">Download PDF</a>
<span class="close">x</span>
<img class="modal-content" id="img2">
<div id="caption">
<div id="caption2"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg2');
var modalImg = document.getElementById("img2");
var captionText = document.getElementById("caption2");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[1];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>