Difference between revisions of "Team:LambertGA/Results"

Line 353: Line 353:
  
  
−
<script type="text/javascript"></script>
+
<!--<script type="text/javascript"></script>-->
  
 
<br>
 
<br>
Line 360: Line 360:
 
<img src="https://static.igem.org/mediawiki/2016/2/26/T--LambertGA--purpleline.jpg" style="width:18%; margin:auto;"> </center>
 
<img src="https://static.igem.org/mediawiki/2016/2/26/T--LambertGA--purpleline.jpg" style="width:18%; margin:auto;"> </center>
  
−
 
+
<div class="container">
−
 
+
    <div id="slideshow">
−
<style style="text/css">
+
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
−
.scroll-left {
+
−
height: 100px;
+
−
overflow: hidden;
+
−
position: relative;
+
−
}
+
−
.scroll-left .inner {
+
−
position: absolute;
+
−
width: 100%;
+
−
height: 100%;
+
−
margin: 0;
+
−
line-height: 50px;
+
−
text-align: center;
+
−
/* Starting position */
+
−
-moz-transform:translateX(100%);
+
−
-webkit-transform:translateX(100%);
+
−
transform:translateX(100%);
+
−
/* Apply animation to this element */
+
−
-moz-animation: scroll-left 15s linear infinite;
+
−
-webkit-animation: scroll-left 15s linear infinite;
+
−
animation: scroll-left 15s linear infinite;
+
−
}
+
−
/* Move it (define the animation) */
+
−
@-moz-keyframes scroll-left {
+
−
0%  { -moz-transform: translateX(100%); }
+
−
100% { -moz-transform: translateX(-100%); }
+
−
}
+
−
@-webkit-keyframes scroll-left {
+
−
0%  { -webkit-transform: translateX(100%); }
+
−
100% { -webkit-transform: translateX(-100%); }
+
−
}
+
−
@keyframes scroll-left {
+
−
0%  {
+
−
-moz-transform: translateX(100%); /* Browser bug fix */
+
−
-webkit-transform: translateX(100%); /* Browser bug fix */
+
−
transform: translateX(100%);
+
−
}
+
−
100% {
+
−
-moz-transform: translateX(-100%); /* Browser bug fix */
+
−
-webkit-transform: translateX(-100%); /* Browser bug fix */
+
−
transform: translateX(-100%);
+
−
}
+
−
}
+
−
</style>
+
−
 
+
−
<div class="scroll-left">
+
−
<div class="inner">
+
−
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
+
−
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
+
−
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
+
−
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
+
−
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
+
 
</div>
 
</div>
 
</div>
 
</div>
 +
<script>
 +
    var imgs = ["http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/554278/132632972.jpg", "http://thumb7.shutterstock.com/photos/thumb_large/101304/133879079.jpg", "http://thumb101.shutterstock.com/photos/thumb_large/422038/422038,1327874090,3.jpg", "http://thumb1.shutterstock.com/photos/thumb_large/975647/149914934.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/195826/148988282.jpg"];
 +
 +
    function changeImage(dir) {
 +
        var img = document.getElementById("imgClickAndChange");
 +
        img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
 +
    }
  
 +
    document.onkeydown = function(e) {
 +
        e = e || window.event;
 +
        if (e.keyCode == '37') {
 +
            changeImage(-1) //left <- show Prev image
 +
        } else if (e.keyCode == '39') {
 +
            // right -> show next image
 +
            changeImage()
 +
        }
 +
    }
 +
</script>
  
 
</p>
 
</p>

Revision as of 02:39, 19 October 2016


Results

slideshow