Difference between revisions of "Team:SDU-Denmark/Model"

 
(32 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
{{SDU-Denmark-middle}}
 
{{SDU-Denmark-middle}}
 
<html>
 
<html>
 +
<!--
 +
<div class="column full_size judges-will-not-evaluate">
 +
<h3>★  ALERT! </h3>
 +
<p>This page is used by the judges to evaluate your team for the<a href="https://2016.igem.org/Judging/Awards"> Best Software Tool award</a>. </p>
 +
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
 +
</div>
 +
-->
 
<div class="container-fluid">
 
<div class="container-fluid">
 
<div class="row">
 
<div class="row">
Line 13: Line 20:
 
     <div class="row">
 
     <div class="row">
 
     <div class="col-sm-11 col-sm-push-1" >
 
     <div class="col-sm-11 col-sm-push-1" >
−
<style type="text/css">
+
<style>
 
a {
 
a {
 
color: #FFF;
 
color: #FFF;
Line 36: Line 43:
 
border: 4px solid #444;
 
border: 4px solid #444;
 
padding: 1px;
 
padding: 1px;
−
width: 800px;
+
/*width: 800px;*/
 
}
 
}
 
</style>
 
</style>
Line 42: Line 49:
 
<div class="gallery" align="center">
 
<div class="gallery" align="center">
 
<div class="thumbnails">
 
<div class="thumbnails">
−
<img onmouseover="preview.src=img1.src" name="img1" src="https://static.igem.org/mediawiki/2016/8/8a/T--SDU-Denmark--viktorgallery.png" alt=""/>
+
<img onclick="preview.src=img1.src" name="img1" src="https://static.igem.org/mediawiki/2016/4/47/T--SDU-Denmark--bestmodel.jpg" alt=""/>
−
<img onmouseover="preview.src=img2.src" name="img2" src="https://static.igem.org/mediawiki/2016/7/72/T--SDU-Denmark--test.gif" alt=""/>
+
<img onclick="preview.src=img2.src" name="img2" src="https://static.igem.org/mediawiki/2016/6/61/T--SDU-Denmark--bubble.gif" alt=""/>
−
<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
+
<img onclick="preview.src=img3.src" name="img3" src="https://static.igem.org/mediawiki/2016/9/92/T--SDU-Denmark--bubble1.jpg" alt=""/>
−
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
+
<img onclick="preview.src=img4.src" name="img4" src="https://static.igem.org/mediawiki/2016/0/06/T--SDU-Denmark--bubble2.jpg" alt=""/>
−
<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
+
<img onclick="preview.src=img19.src" name="img19" src="https://static.igem.org/mediawiki/2016/d/d3/T--SDU-Denmark--dtuf%C3%A6lles.jpg" alt=""/>
 +
<img onclick="preview.src=img5.src" name="img5" src="https://static.igem.org/mediawiki/2016/7/74/T--SDU-Denmark--hosbrian.jpg" alt=""/>
 +
<img onclick="preview.src=img6.src" name="img6" src="https://static.igem.org/mediawiki/2016/7/73/T--SDU-Denmark--labwork.jpeg" alt=""/>
 +
<img onclick="preview.src=img7.src" name="img7" src="https://static.igem.org/mediawiki/2016/7/71/T--SDU-Denmark--marburg1.jpg" alt=""/>
 +
<img onclick="preview.src=img8.src" name="img8" src="https://static.igem.org/mediawiki/2016/c/c4/T--SDU-Denmark--marburg2.jpg" alt=""/>
 +
<img onclick="preview.src=img9.src" name="img9" src="https://static.igem.org/mediawiki/2016/e/e4/T--SDU-Denmark--marburg3.jpg" alt=""/>
 +
<img onclick="preview.src=img10.src" name="img10" src="https://static.igem.org/mediawiki/2016/b/be/T--SDU-Denmark--stockholm.jpg" alt=""/>
 +
<img onclick="preview.src=img11.src" name="img11" src="https://static.igem.org/mediawiki/2016/9/9e/T--SDU-Denmark--nordic2.jpg" alt=""/>
 +
<img onclick="preview.src=img12.src" name="img12" src="https://static.igem.org/mediawiki/2016/6/6a/T--SDU-Denmark--nordic1.jpg" alt=""/>
 +
<img onclick="preview.src=img13.src" name="img13" src="https://static.igem.org/mediawiki/2016/9/93/T--SDU-Denmark--partybus.jpg" alt=""/>
 +
<img onclick="preview.src=img14.src" name="img14" src="https://static.igem.org/mediawiki/2016/7/78/T--SDU-Denmark--roadtrip.jpg" alt=""/>
 +
<img onclick="preview.src=img15.src" name="img15" src="https://static.igem.org/mediawiki/2016/5/50/T--SDU-Denmark--sommerhus.jpg" alt=""/>
 +
                <img onclick="preview.src=img16.src" name="img16" src="https://static.igem.org/mediawiki/2016/8/87/T--SDU-Denmark--rune.gif" alt=""/>
 +
<img onclick="preview.src=img17.src" name="img17" src="https://static.igem.org/mediawiki/2016/0/06/T--SDU-Denmark--sommerhus3.jpg" alt=""/>
 +
<img onclick="preview.src=img18.src" name="img18" src="https://static.igem.org/mediawiki/2016/f/fd/T--SDU-Denmark--wikiwork.jpg" alt=""/>
 +
 
</div><br/>
 
</div><br/>
  
 
<div class="preview" align="center">
 
<div class="preview" align="center">
−
<img name="preview" src="https://static.igem.org/mediawiki/2016/8/8a/T--SDU-Denmark--viktorgallery.png" alt=""/>
+
<img name="preview" style="max-width:80%;" src="https://static.igem.org/mediawiki/2016/4/47/T--SDU-Denmark--bestmodel.jpg" alt=""/>
 
</div>
 
</div>
  
 
</div>
 
</div>
−
 
−
 
−
<style>
 
−
#myImg {
 
−
    border-radius: 5px;
 
−
    cursor: pointer;
 
−
    transition: 0.3s;
 
−
}
 
−
 
−
#myImg:hover {opacity: 0.7;}
 
−
 
−
/* The Modal (background) */
 
−
.modal {
 
−
    display: none; /* Hidden by default */
 
−
    position: fixed; /* Stay in place */
 
−
    z-index: 1; /* Sit on top */
 
−
    padding-top: 100px; /* Location of the box */
 
−
    left: 0;
 
−
    top: 0;
 
−
    width: 100%; /* Full width */
 
−
    height: 100%; /* Full height */
 
−
    overflow: auto; /* 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: 80%;
 
−
    max-width: 700px;
 
−
}
 
−
 
−
/* 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: 15px;
 
−
    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>
 
−
 
−
<h2>Image Modal</h2>
 
−
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
 
−
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
 
−
 
−
<img id="myImg" src="https://static.igem.org/mediawiki/2016/e/e1/T--BIT-China--img--pumpkin.png" alt="Trolltunga, Norway" width="300" height="200">
 
−
 
−
<!-- The Modal -->
 
−
<div id="myModal" class="modal">
 
−
  <span class="close">×</span>
 
−
  <img class="modal-content" id="img01">
 
−
  <div id="caption"></div>
 
−
</div>
 
−
 
−
<script>
 
−
// Get the modal
 
−
var modal = document.getElementById('myModal');
 
−
 
−
// Get the image and insert it inside the modal - use its "alt" text as a caption
 
−
var img = document.getElementById('myImg');
 
−
var modalImg = document.getElementById("img01");
 
−
var captionText = document.getElementById("caption");
 
−
img.onclick = function(){
 
−
    modal.style.display = "block";
 
−
    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>
 
−
 
  
  

Latest revision as of 22:22, 19 October 2016

The Best