Team:TU-Delft/Zephyr

From 2013.igem.org

(Difference between revisions)
Line 26: Line 26:
<h2 align="center">Drawings</h2>
<h2 align="center">Drawings</h2>
</html>
</html>
 +
<html>
 +
    <style type="text/css">
 +
* {margin: 0; padding: 0;}
-
<html >
+
   
-
  <style type="text/css">
+
.slider{
-
#photos {
+
width: 700px; /*Same as width of the large image*/
-
  width:600px;
+
position: relative;
-
  overflow:hidden;
+
/*Instead of height we will use padding*/
 +
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
 +
 +
 +
 +
/*Lets add a shadow*/
 +
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
}
   
   
-
#photosInner {
+
-
  height:100px;
+
/*Last thing remaining is to add transitions*/
-
  width:1500px;
+
.slider>img{
-
  overflow:hidden;
+
position: absolute;
-
  position:relative;
+
left: 5px; top: 5px;
 +
transition: all 0.5s;
}
}
   
   
-
#photosInner img {
+
.slider input[name='slide_switch'] {
-
  float:left;
+
display: none;
-
  width:100px;
+
}
-
  height:100px;
+
 +
.slider label {
 +
/*Lets add some spacing for the thumbnails*/
 +
margin: 10px 0 0 815px;
 +
border: 3px solid #999;
 +
 +
float: left;
 +
cursor: pointer;
 +
transition: all 0.5s;
 +
     
 +
/*Default style = low opacity*/
 +
opacity: 0.6;
 +
}
 +
 +
.slider label img{
 +
display: block;
 +
}
 +
 +
/*Time to add the click effects*/
 +
.slider input[name='slide_switch']:checked+label {
 +
border-color: #666;
 +
opacity: 1;
 +
}
 +
/*Clicking any thumbnail now should change its opacity(style)*/
 +
/*Time to work on the main images*/
 +
.slider input[name='slide_switch'] ~ img {
 +
opacity: 0;
 +
transform: scale(1.1);
 +
}
 +
/*That hides all main images at a 110% size
 +
On click the images will be displayed at normal size to complete the effect
 +
*/
 +
.slider input[name='slide_switch']:checked+label+img {
 +
opacity: 1;
 +
transform: scale(1);
}
}
-
 
</style>
</style>
</html>
</html>
 +
<html>
<html>
-
<script type="text/javascript">
 
-
$(function(){
+
<div class="slider">
-
  $('#photosInner').click(function(){
+
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
-
    var scrollAmount = $(this).width() - $(this).parent().width();
+
<label for="id1">
-
    var currentPos = Math.abs(parseInt($(this).css('left')));
+
        Drawing 1
-
    var remainingScroll = scrollAmount - currentPos;
+
</label>
 +
<img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" width="519px"/>
   
   
-
    // scroll half a screen by default
 
-
    var nextScroll = Math.floor($(this).parent().width() / 2);
 
-
 
-
    // But if there isn't a FULL scroll left, only scroll remaining amount
 
-
    if (remainingScroll < nextScroll){
 
-
      nextScroll = remainingScroll;
 
-
    }
 
-
 
-
    if(currentPos < scrollAmount){
 
-
      //Scroll left
 
-
      $(this).animate({'left':'-=' + nextScroll}, 'slow');
 
-
    } else {
 
-
      // Scroll right
 
-
      $(this).animate({'left':'0'}, 'fast');
 
-
    }
 
-
  });
 
-
});
 
-
</script>
 
-
</html>
 
-
<html>
+
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
-
<div id="photos">
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
  <div id="photosInner">
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
    <img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" />
+
 
-
    <img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" />
+
 
-
    <img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" />
+
-
    <img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" />
+
-
  </div>
+
-
</div>
+
</html>
</html>

Revision as of 13:49, 25 September 2013


Zephyr


Figure 1: The way to Zephyr! Joep in action!

Drawings









































Retrieved from "http://2013.igem.org/Team:TU-Delft/Zephyr"