Image Enlarge LMS Embed
Thu Nov 03 2022 19:38:01 GMT+0000 (Coordinated Universal Time)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } img { -webkit-filter: brightness(100%); } #myImg:hover { -webkit-filter: brightness(80%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } /* 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 */ } /* Modal Content (image) */ .modal-content { margin: 0 auto; display: block; width: 90%; max-width: 90%; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .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: 20px; right: 65px; color: #ff5555; 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: 90%; } } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; margin: auto; } </style> </head> <body> <center><img class="myImages" id="myImg" src="https://lwfiles.mycourse.app/testpro-public/c453e4c73efebdbd55d7c48e24d4aca4.jpeg" style="width:100%;max-width:700px"> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // create references to the modal... var modal = document.getElementById('myModal'); // to all images -- note I'm using a class! var images = document.getElementsByClassName('myImages'); // the image in the modal var modalImg = document.getElementById("img01"); // and the caption in the modal var captionText = document.getElementById("caption"); // Go through all of the images with our custom class for (var i = 0; i < images.length; i++) { var img = images[i]; // and attach our click listener for this image. img.onclick = function(evt) { console.log(evt); modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } } var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>
Comments