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

Line 1: Line 1:
 
{{:Team:UChile_Biotec/css}}
 
{{:Team:UChile_Biotec/css}}
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
* {
 +
    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: 10px;
 +
    right: 15px;
 +
    color: white;
 +
    font-size: 35px;
 +
    cursor: pointer;
 +
}
 +
</style>
 +
</head>
 
<body>
 
<body>
  
−
<div class="column full_size">
+
<div style="text-align:center">
 +
  <h2>Tabbed Image Gallery</h2>
 +
  <p>Click on the images below:</p>
 +
</div>
  
−
<!-- The grid: four columns -->
+
<!-- The four columns -->
 
<div class="row">
 
<div class="row">
 
   <div class="column">
 
   <div class="column">
−
     <img src="https://static.igem.org/mediawiki/2018/f/f9/T--UChile_Biotec--Pactices8.jpg" alt="Nature" onclick="openImg(this);">
+
     <img src="https://static.igem.org/mediawiki/2018/f/f9/T--UChile_Biotec--Pactices8.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
 
   </div>
 
   </div>
 
   <div class="column">
 
   <div class="column">
−
     <img src="https://static.igem.org/mediawiki/2018/a/a4/T--UChile_Biotec--Pactices9.jpg" alt="Snow" onclick="openImg(this);">
+
     <img src="https://static.igem.org/mediawiki/2018/a/a4/T--UChile_Biotec--Pactices9.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
 
   </div>
 
   </div>
 
   <div class="column">
 
   <div class="column">
−
     <img src="https://static.igem.org/mediawiki/2018/4/4a/T--UChile_Biotec--Pactices10.jpg" alt="Mountains" onclick="openImg(this);">
+
     <img src="https://static.igem.org/mediawiki/2018/4/4a/T--UChile_Biotec--Pactices10.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
 
   </div>
 
   </div>
 
   <div class="column">
 
   <div class="column">
−
     <img src="https://static.igem.org/mediawiki/2018/0/0a/T--UChile_Biotec--Pactices11.jpg
+
     <img src="https://static.igem.org/mediawiki/2018/0/0a/T--UChile_Biotec--Pactices11.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
−
" alt="Lights" onclick="openImg(this);">
+
−
  </div>
+
−
  <div class="column">
+
−
    <img src="https://static.igem.org/mediawiki/2018/9/94/T--UChile_Biotec--Pactices12.jpg
+
−
" alt="Lights" onclick="openImg(this);">
+
−
  </div>
+
−
  <div class="column">
+
−
    <img src="https://static.igem.org/mediawiki/2018/6/64/T--UChile_Biotec--Pactices14.jpg
+
−
" alt="Lights" onclick="openImg(this);">
+
 
   </div>
 
   </div>
 
</div>
 
</div>
  
−
<!-- The expanding image container -->
 
 
<div class="container">
 
<div class="container">
−
  <!-- Close the image -->
 
 
   <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 
   <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
−
 
−
  <!-- Expanded image -->
 
 
   <img id="expandedImg" style="width:100%">
 
   <img id="expandedImg" style="width:100%">
−
 
−
  <!-- Image text -->
 
 
   <div id="imgtext"></div>
 
   <div id="imgtext"></div>
 
</div>
 
</div>
  
−
<br>
+
<script>
−
 
+
function myFunction(imgs) {
−
</div>
+
    var expandImg = document.getElementById("expandedImg");
 +
    var imgText = document.getElementById("imgtext");
 +
    expandImg.src = imgs.src;
 +
    imgText.innerHTML = imgs.alt;
 +
    expandImg.parentElement.style.display = "block";
 +
}
 +
</script>
  
 
</body>
 
</body>
 +
</html>
  
−
</html>
+
<html>

Revision as of 22:03, 17 October 2018

HOME
PROJECT
Our Project
The Problem
Our Solution
LAB
Laboratory
Overview
Notebook
Results
InterLab
DESIGN
Our Design
The Device
TEAM
Team Members
Us
Sponsors
Attributions
PRACTICES
Human Practices
Education & Engagement
Fieldwork
Meetings
Team Protocol
Collaborations
LATAM







Tabbed Image Gallery

Click on the images below:

Nature
Snow
Mountains
Lights
×