Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"

Revision as of 23:01, 24 August 2018

content

https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg

content

@@ Line 106: / Line 106: @@
 </ul>
+<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>
+</div>
+<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>
+</div>
+<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>
+</div>
+<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>
+</div>
+<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>
+</div>
+<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>
+</div>
+</div>
+<div id="PopupModal" class="modal">
+  <span class="close">&times;</span>
+  <img class="modal-content" id="img01">
+  <div id="caption"></div>
+</div>
+<script>
+function getEventTarget(e) {
+    e = e || window.event;
+    return e.target || e.srcElement;
+}
+var ul = document.getElementById('PopupImgList');
+ul.onclick = function(event) {
+    var target = getEventTarget(event);
+    <!--alert(target.src);-->
+    var modal = document.getElementById('PopupModal');
+    // Get the image and insert it inside the modal - use its "alt" text as a caption
+    var img = target.alt;
+    var modalImg = document.getElementById("img01");
+    var captionText = document.getElementById("caption");
+    modal.style.display = "inline";
+    modalImg.src = target.src;
+    captionText.innerHTML = target.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>
+</body>
+</html>
+{{Template:Toronto/CSS}}
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {font-family: Arial, Helvetica, sans-serif;}
+#PopupImg {
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+#PopupImg:hover {opacity: 0.7; z-index: -1;}
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 101; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: scroll; /* 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: auto;
+    display: block;
+    width: 100%;
+    overflow-y: scroll;
+}
+/* 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: 135px;
+    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>
+<div class="headerspacer">
+  content
+</div>
+<div class='bodyWhiteClass'>
+<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">
+  <img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px" >
+  <img id="PopupImg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg"  style="width:100%;max-width:300px">
+</ul>
+<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>
+</div>
+<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>
+</div>
 <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>