jojovee
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by jojovee
-
-
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>
Modal images with download link
in General
Posted
The duplicate "caption" ids was just so I could apply the same style to every caption (caption1, caption2 etc) via a css file and the way I've done the above is just how I figured it out so I could get multiple images into the same modal. I know I've done it wrong but it was a way I figured out that was easy for me. What you've just suggested is beyond my capabilities because as mentioned above, I just grabbed the script as it was from the w3school tutorial and made it fit to my needs. Without someone writing it for me I wouldn't be able to write what I need myself. I need a tutorial like the one above but just with multiple images side by side and the ability to add download links to each image.