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>
−
 
+
 
−
<img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px">
+
<ul id="popUpImgList">
 +
  <img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px">
 +
</ul>
  
 
<!-- The Modal -->
 
<!-- The Modal -->
Line 106: Line 108:
  
 
<script>
 
<script>
−
// Get the modal
+
$(function() {
−
var modal = document.getElementById('PopupModal');
+
  $( '#popUpImgList > ul' ).bind( "click", function() {
−
 
+
     alert( "User clicked on 'foo.'" );
−
// Get the image and insert it inside the modal - use its "alt" text as a caption
+
  });
−
var img = document.getElementById('PopupImg');
+
});
−
var modalImg = document.getElementById("img01");
+
−
var captionText = document.getElementById("caption");
+
−
img.onclick = function(){
+
−
     modal.style.display = "inline";
+
−
    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";
+
−
}
+
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:20, 14 August 2018

    Lab