Jump to content

jojovee

Members
  • Posts

    2
  • Joined

  • Last visited

jojovee's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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.
  2. 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>
×
×
  • Create New...