Jump to content

Modal images with download link


jojovee

Recommended Posts

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>
Link to comment
Share on other sites

You have duplicate "caption" ids, and you ask it to use modal as a reference, but you are using it twice with different ids, but if used, it will refer to last id reference of element object it was assigned to.

 

I would use singe modal, and use onclicck event to gather img src, alt and a custom data- attribute for gathering file download name to insert in modal where needed.

 

Use reference to class name of these specific images to loop through and apply onclick event and process alt, src, data- to copy to single modal.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

ID references MUST be unique within a page, using JavaScript to refer to multiple ID ref will result in last element with that specific ID being targeted, the previous being ignored,

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Modal images with download link</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <script type="text/javascript">

        </script>
        <style type="text/css">
            /* Style the Image Used to Trigger the Modal */
            #myImg {
                border-radius: 5px;
                cursor: pointer;
                transition: 0.3s;
            }

            #myImg:hover {opacity: 0.7;}

            /* The Modal (background) */
            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
            }

            #myModal {text-align:center;}

            /* Modal Content (Image) */
            .modal-content {
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
            }

            /* Caption of Modal Image (Image Text) - Same Width as the Image */
            #caption, #myModal_link { /*amended by dsonesuk */
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
                text-align: center;
                color: #ccc;
                padding: 10px 0;
                height: 150px;
            }

            #myModal_link { /*added by dsonesuk */
                display: inline-block;
                height: auto;
                width: auto;
            }

            #myModal {text-align:center;} /*added by dsonesuk */


            /* Add Animation - Zoom in the Modal */
            .modal-content, #caption {
                -webkit-animation-name: zoom;
                -webkit-animation-duration: 0.6s;
                animation-name: zoom;
                animation-duration: 0.6s;
            }

            @-webkit-keyframes zoom {
                from {-webkit-transform:scale(0)}
                to {-webkit-transform:scale(1)}
            }

            @keyframes zoom {
                from {transform:scale(0)}
                to {transform:scale(1)}
            }

            /* The Close Button */
            .close {
                position: absolute;
                top: 15px;
                right: 35px;
                color: #f1f1f1;
                font-size: 40px;
                font-weight: bold;
                transition: 0.3s;
            }

            .close:hover,
            .close:focus {
                color: #bbb;
                text-decoration: none;
                cursor: pointer;
            }

            /* 100% Image Width on Smaller Screens */
            @media only screen and (max-width: 700px){
                .modal-content {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <img class="ModalTriggerImage" src="http://www.w3schools.com/howto/img_fjords.jpg" alt="Test image 1" width="95" height="146" data-file="test.pdf">

        <img class="ModalTriggerImage" src="http://www.w3schools.com/howto/img_nature_wide.jpg" alt="Test image 2" width="95" height="146"  data-file="test2.pdf">


        <!-- The Modal -->
        <div id="myModal" class="modal">

            <span class="close">x</span>
            <img class="modal-content" id="img01">
            <div id="caption">

            </div>
            <a id="myModal_link" href="test.pdf">Download PDF</a>
        </div>



        <script>

            // 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 myModalImg = document.getElementById("img01");
            var myModalcaptionText = document.getElementById("caption");
            var myModalLink = document.getElementById("myModal_link");
            myModalTriggerElement = document.getElementsByClassName("ModalTriggerImage");




            for (var i = 0; i < myModalTriggerElement.length; i++)
            {
                myModalTriggerElement[i].onclick = function() {

                    myModalImg.src = this.src;
                    myModalcaptionText.innerHTML = this.alt;
                    modal.style.display = "block";
                    myModalLink.href = this.getAttribute('data-file')

                }


            }




            // 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>
    </body>
</html>

Single modal, all using unique ID, the difference is we use multiple classes with event trigger to gather info from image to apply to content of modal, the pdf file name is also store with image as custom data- attribute.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...