Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"
| Line 50: | Line 50: | ||
/* Add Animation */ | /* Add Animation */ | ||
| − | .modal-content, #caption { | + | .modal-content, #caption { |
-webkit-animation-name: zoom; | -webkit-animation-name: zoom; | ||
-webkit-animation-duration: 0.6s; | -webkit-animation-duration: 0.6s; | ||
| Line 58: | Line 58: | ||
@-webkit-keyframes zoom { | @-webkit-keyframes zoom { | ||
| − | from {-webkit-transform:scale(0)} | + | from {-webkit-transform:scale(0)} |
to {-webkit-transform:scale(1)} | to {-webkit-transform:scale(1)} | ||
} | } | ||
@keyframes zoom { | @keyframes zoom { | ||
| − | from {transform:scale(0)} | + | from {transform:scale(0)} |
to {transform:scale(1)} | to {transform:scale(1)} | ||
} | } | ||
| Line 95: | Line 95: | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | ||
<div class='bodyClearClass'> | <div class='bodyClearClass'> | ||
<ul id="PopupImgList"> | <ul id="PopupImgList"> | ||
| Line 103: | Line 103: | ||
</ul> | </ul> | ||
| − | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | + | <div class= 'oneThirdClass'> |
| − | + | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | |
| + | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | ||
| + | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | ||
| + | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | ||
| + | <a href="https://static.igem.org/mediawiki/2018/f/f9/T--Toronto--Protocol-8-14-2018.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px"></a> | ||
| + | </div> | ||
</div> | </div> | ||
| Line 116: | Line 121: | ||
function getEventTarget(e) { | function getEventTarget(e) { | ||
e = e || window.event; | e = e || window.event; | ||
| − | return e.target || e.srcElement; | + | return e.target || e.srcElement; |
} | } | ||
| Line 124: | Line 129: | ||
<!--alert(target.src);--> | <!--alert(target.src);--> | ||
var modal = document.getElementById('PopupModal'); | var modal = document.getElementById('PopupModal'); | ||
| − | + | ||
// Get the image and insert it inside the modal - use its "alt" text as a caption | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
var img = target.alt; | var img = target.alt; | ||
| Line 132: | Line 137: | ||
modalImg.src = target.src; | modalImg.src = target.src; | ||
| − | + | ||
captionText.innerHTML = target.alt; | captionText.innerHTML = target.alt; | ||
// Get the <span> element that closes the modal | // Get the <span> element that closes the modal | ||
var span = document.getElementsByClassName("close")[0]; | var span = document.getElementsByClassName("close")[0]; | ||
| − | + | ||
// When the user clicks on <span> (x), close the modal | // When the user clicks on <span> (x), close the modal | ||
span.onclick = function() { | span.onclick = function() { | ||
| Line 143: | Line 148: | ||
}; | }; | ||
</script> | </script> | ||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 22:42, 24 August 2018
×
![]()