Difference between revisions of "Team:UChile Biotec/Education"

@@ Line 1: / Line 1: @@
 {{:Team:UChile_Biotec/css}}
 <html>
-<head>
+<title>W3.CSS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <style>
-* {
+.mySlides {display:none;}
-    box-sizing: border-box;
-}
-body {
-    margin: 0;
-    font-family: Arial;
-}
-/* The grid: Four equal columns that floats next to each other */
-.column {
-    float: left;
-    width: 25%;
-    padding: 10px;
-}
-/* Style the images inside the grid */
-.column img {
-    opacity: 0.8;
-    cursor: pointer;
-}
-.column img:hover {
-    opacity: 1;
-}
-/* Clear floats after the columns */
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-/* The expanding image container */
-.container {
-    position: relative;
-    display: none;
-}
-/* Expanding image text */
-#imgtext {
-    position: absolute;
-    bottom: 15px;
-    left: 15px;
-    color: white;
-    font-size: 20px;
-}
-/* Closable button inside the expanded image */
-.closebtn {
-    position: absolute;
-    top: 50px;
-    left: 25px;
-    color: white;
-    font-size: 40px;
-    cursor: pointer;
-}
 </style>
-</head>
 <body>
-<div class="column full_size">
+<h2 class="w3-center">Manual Slideshow</h2>
-<div style="text-align:center">
+<div class="w3-content w3-display-container">
-   <h2>Tabbed Image Gallery</h2>
+   <img class="mySlides" src="https://static.igem.org/mediawiki/2018/f/f9/T--UChile_Biotec--Pactices8.jpg" style="width:100%">
-   <p>Click on the images below:</p>
+  <img class="mySlides" src="https://static.igem.org/mediawiki/2018/a/a4/T--UChile_Biotec--Pactices9.jpg" style="width:100%">
-</div>
+   <img class="mySlides" src="https://static.igem.org/mediawiki/2018/4/4a/T--UChile_Biotec--Pactices10.jpg" style="width:100%">
+  <img class="mySlides" src="https://static.igem.org/mediawiki/2018/0/0a/T--UChile_Biotec--Pactices11.jpg" style="width:100%">
-<!-- The four columns -->
+   <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
-<div class="row">
+   <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
-   <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/f/f9/T--UChile_Biotec--Pactices8.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
-  <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/a/a4/T--UChile_Biotec--Pactices9.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
-  <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/4/4a/T--UChile_Biotec--Pactices10.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
-   <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/0/0a/T--UChile_Biotec--Pactices11.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
-  <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/9/94/T--UChile_Biotec--Pactices12.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
-  <div class="column">
-    <img src="https://static.igem.org/mediawiki/2018/6/64/T--UChile_Biotec--Pactices14.jpg" alt="" style="width:100%" onclick="myFunction(this);">
-  </div>
 </div>
-<div class="container">
+<script>
-  <span onclick="this.parentElement.style.display='none'" class="closebtn">X</span>
+var slideIndex = 1;
-  <img id="expandedImg" style="width:90%; position:center;">
+showDivs(slideIndex);
-  <div id="imgtext"></div>
-</div>
-<script>
+function plusDivs(n) {
-function myFunction(imgs) {
+  showDivs(slideIndex += n);
-    var expandImg = document.getElementById("expandedImg");
+}
-    var imgText = document.getElementById("imgtext");
-    expandImg.src = imgs.src;
+function showDivs(n) {
-    imgText.innerHTML = imgs.alt;
+  var i;
-    expandImg.parentElement.style.display = "block";
+  var x = document.getElementsByClassName("mySlides");
+  if (n > x.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = x.length}
+  for (i = 0; i < x.length; i++) {
+     x[i].style.display = "none";
+  }
+  x[slideIndex-1].style.display = "block";
 }
 </script>
-</div>
 </body>
 </html>
-<html>