Team:TU-Delft/Zephyr

From 2013.igem.org

(Difference between revisions)
Line 29: Line 29:
<html>
<html>
-
    <style type="text/css">
+
>
-
* {margin: 0; padding: 0;}
+
<head>
-
 
+
<title>Visual Slideshow generated by VisualSlideshow.com</title>
-
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
.slider{
+
<meta name="keywords" content="Visual Slideshow, How To Slide Show, Picture Slide Show" />
-
width: 700px; /*Same as width of the large image*/
+
<meta name="description" content="Visual Slideshow created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
-
position: relative;
+
<!-- Start VisualSlideShow.com HEAD section -->
-
/*Instead of height we will use padding*/
+
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
-
/*padding-bottom: -1121px;*/ /*That helps bring the labels down*/
+
<style type="text/css">.slideshow a#vlb{display:none}</style>
-
+
<script type="text/javascript" src="engine/js/mootools.js"></script>
-
+
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
-
+
<!-- End VisualSlideShow.com HEAD section -->
-
/*Lets add a shadow*/
+
</head>
-
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
+
<body style="background-color:#ffffff">
-
}
+
<!-- Start VisualSlideShow.com BODY section -->
-
+
<div id="show" class="slideshow">
-
+
<div class="slideshow-images">
-
/*Last thing remaining is to add transitions*/
+
<a href="#"><img id="slide-0" src="data/images/zephyr_part_drawings_page_01.jpg" alt="zephyr_part_drawings_Page_01" title="zephyr_part_drawings_Page_01" /></a>
-
.slider>img{
+
<a href="#"><img id="slide-1" src="data/images/zephyr_part_drawings_page_02.jpg" alt="zephyr_part_drawings_Page_02" title="zephyr_part_drawings_Page_02" /></a>
-
position: absolute;
+
<a href="#"><img id="slide-2" src="data/images/zephyr_part_drawings_page_03.jpg" alt="zephyr_part_drawings_Page_03" title="zephyr_part_drawings_Page_03" /></a>
-
left: 200px; top: 5px;
+
<a href="#"><img id="slide-3" src="data/images/zephyr_part_drawings_page_04.jpg" alt="zephyr_part_drawings_Page_04" title="zephyr_part_drawings_Page_04" /></a>
-
transition: all 0.5s;
+
<a href="#"><img id="slide-4" src="data/images/zephyr_part_drawings_page_05.jpg" alt="zephyr_part_drawings_Page_05" title="zephyr_part_drawings_Page_05" /></a>
-
}
+
<a href="#"><img id="slide-5" src="data/images/zephyr_part_drawings_page_06.jpg" alt="zephyr_part_drawings_Page_06" title="zephyr_part_drawings_Page_06" /></a>
-
+
<a href="#"><img id="slide-6" src="data/images/zephyr_part_drawings_page_07.jpg" alt="zephyr_part_drawings_Page_07" title="zephyr_part_drawings_Page_07" /></a>
-
.slider input[name='slide_switch'] {
+
<a href="#"><img id="slide-7" src="data/images/zephyr_part_drawings_page_08.jpg" alt="zephyr_part_drawings_Page_08" title="zephyr_part_drawings_Page_08" /></a>
-
display: none;
+
<a href="#"><img id="slide-8" src="data/images/zephyr_part_drawings_page_09.jpg" alt="zephyr_part_drawings_Page_09" title="zephyr_part_drawings_Page_09" /></a>
-
}
+
<a href="#"><img id="slide-9" src="data/images/zephyr_part_drawings_page_10.jpg" alt="zephyr_part_drawings_Page_10" title="zephyr_part_drawings_Page_10" /></a>
-
+
<a href="#"><img id="slide-10" src="data/images/zephyr_part_drawings_page_11.jpg" alt="zephyr_part_drawings_Page_11" title="zephyr_part_drawings_Page_11" /></a>
-
.slider label {
+
<a href="#"><img id="slide-11" src="data/images/zephyr_part_drawings_page_12.jpg" alt="zephyr_part_drawings_Page_12" title="zephyr_part_drawings_Page_12" /></a>
-
/*Lets add some spacing for the thumbnails*/
+
<a href="#"><img id="slide-12" src="data/images/zephyr_part_drawings_page_13.jpg" alt="zephyr_part_drawings_Page_13" title="zephyr_part_drawings_Page_13" /></a>
-
margin: 10px 0 -90 773px;
+
<a href="#"><img id="slide-13" src="data/images/zephyr_part_drawings_page_14.jpg" alt="zephyr_part_drawings_Page_14" title="zephyr_part_drawings_Page_14" /></a>
-
 
+
<a href="#"><img id="slide-14" src="data/images/zephyr_part_drawings_page_15.jpg" alt="zephyr_part_drawings_Page_15" title="zephyr_part_drawings_Page_15" /></a>
-
 
+
<a href="#"><img id="slide-15" src="data/images/zephyr_part_drawings_page_16.jpg" alt="zephyr_part_drawings_Page_16" title="zephyr_part_drawings_Page_16" /></a>
-
border: 3px solid #999;
+
<a href="#"><img id="slide-16" src="data/images/zephyr_part_drawings_page_17.jpg" alt="zephyr_part_drawings_Page_17" title="zephyr_part_drawings_Page_17" /></a>
-
 
+
<a href="#"><img id="slide-17" src="data/images/zephyr_part_drawings_page_18.jpg" alt="zephyr_part_drawings_Page_18" title="zephyr_part_drawings_Page_18" /></a>
-
float: left;
+
<a href="#"><img id="slide-18" src="data/images/zephyr_part_drawings_page_19.jpg" alt="zephyr_part_drawings_Page_19" title="zephyr_part_drawings_Page_19" /></a>
-
cursor: pointer;
+
<a href="#"><img id="slide-19" src="data/images/zephyr_part_drawings_page_20.jpg" alt="zephyr_part_drawings_Page_20" title="zephyr_part_drawings_Page_20" /></a>
-
transition: all 0.5s;
+
<a href="#"><img id="slide-20" src="data/images/zephyr_part_drawings_page_21.jpg" alt="zephyr_part_drawings_Page_21" title="zephyr_part_drawings_Page_21" /></a>
-
     
+
<a href="#"><img id="slide-21" src="data/images/zephyr_part_drawings_page_22.jpg" alt="zephyr_part_drawings_Page_22" title="zephyr_part_drawings_Page_22" /></a>
-
/*Default style = low opacity*/
+
<a href="#"><img id="slide-22" src="data/images/zephyr_part_drawings_page_23.jpg" alt="zephyr_part_drawings_Page_23" title="zephyr_part_drawings_Page_23" /></a>
-
opacity: 0.6;
+
<a href="#"><img id="slide-23" src="data/images/zephyr_part_drawings_page_24.jpg" alt="zephyr_part_drawings_Page_24" title="zephyr_part_drawings_Page_24" /></a>
-
}
+
<a href="#"><img id="slide-24" src="data/images/zephyr_part_drawings_page_25.jpg" alt="zephyr_part_drawings_Page_25" title="zephyr_part_drawings_Page_25" /></a>
-
+
<a href="#"><img id="slide-25" src="data/images/zephyr_part_drawings_page_26.jpg" alt="zephyr_part_drawings_Page_26" title="zephyr_part_drawings_Page_26" /></a>
-
.slider label img{
+
<a href="#"><img id="slide-26" src="data/images/zephyr_part_drawings_page_27.jpg" alt="zephyr_part_drawings_Page_27" title="zephyr_part_drawings_Page_27" /></a>
-
display: block;
+
<a href="#"><img id="slide-27" src="data/images/zephyr_part_drawings_page_28.jpg" alt="zephyr_part_drawings_Page_28" title="zephyr_part_drawings_Page_28" /></a>
-
}
+
<a href="#"><img id="slide-28" src="data/images/zephyr_part_drawings_page_29.jpg" alt="zephyr_part_drawings_Page_29" title="zephyr_part_drawings_Page_29" /></a>
-
+
<a href="#"><img id="slide-29" src="data/images/zephyr_part_drawings_page_30.jpg" alt="zephyr_part_drawings_Page_30" title="zephyr_part_drawings_Page_30" /></a>
-
/*Time to add the click effects*/
+
<a href="#"><img id="slide-30" src="data/images/zephyr_part_drawings_page_31.jpg" alt="zephyr_part_drawings_Page_31" title="zephyr_part_drawings_Page_31" /></a>
-
.slider input[name='slide_switch']:checked+label {
+
<a href="#"><img id="slide-31" src="data/images/zephyr_part_drawings_page_32.jpg" alt="zephyr_part_drawings_Page_32" title="zephyr_part_drawings_Page_32" /></a>
-
border-color: #666;
+
<a href="#"><img id="slide-32" src="data/images/zephyr_part_drawings_page_33.jpg" alt="zephyr_part_drawings_Page_33" title="zephyr_part_drawings_Page_33" /></a>
-
opacity: 1;
+
<a href="#"><img id="slide-33" src="data/images/zephyr_part_drawings_page_34.jpg" alt="zephyr_part_drawings_Page_34" title="zephyr_part_drawings_Page_34" /></a>
-
}
+
<a href="#"><img id="slide-34" src="data/images/zephyr_part_drawings_page_35.jpg" alt="zephyr_part_drawings_Page_35" title="zephyr_part_drawings_Page_35" /></a>
-
/*Clicking any thumbnail now should change its opacity(style)*/
+
<a href="#"><img id="slide-35" src="data/images/zephyr_part_drawings_page_36.jpg" alt="zephyr_part_drawings_Page_36" title="zephyr_part_drawings_Page_36" /></a>
-
/*Time to work on the main images*/
+
<a href="#"><img id="slide-36" src="data/images/zephyr_part_drawings_page_37.jpg" alt="zephyr_part_drawings_Page_37" title="zephyr_part_drawings_Page_37" /></a>
-
.slider input[name='slide_switch'] ~ img {
+
<a href="#"><img id="slide-37" src="data/images/zephyr_part_drawings_page_38.jpg" alt="zephyr_part_drawings_Page_38" title="zephyr_part_drawings_Page_38" /></a>
-
opacity: 0;
+
<a href="#"><img id="slide-38" src="data/images/zephyr_part_drawings_page_39.jpg" alt="zephyr_part_drawings_Page_39" title="zephyr_part_drawings_Page_39" /></a>
-
transform: scale(1.1);
+
<a href="#"><img id="slide-39" src="data/images/zephyr_part_drawings_page_40.jpg" alt="zephyr_part_drawings_Page_40" title="zephyr_part_drawings_Page_40" /></a>
-
}
+
<a href="#"><img id="slide-40" src="data/images/zephyr_part_drawings_page_41.jpg" alt="zephyr_part_drawings_Page_41" title="zephyr_part_drawings_Page_41" /></a>
-
/*That hides all main images at a 110% size
+
<a href="#"><img id="slide-41" src="data/images/zephyr_part_drawings_page_42.jpg" alt="zephyr_part_drawings_Page_42" title="zephyr_part_drawings_Page_42" /></a>
-
On click the images will be displayed at normal size to complete the effect
+
<a href="#"><img id="slide-42" src="data/images/zephyr_part_drawings_page_43.jpg" alt="zephyr_part_drawings_Page_43" title="zephyr_part_drawings_Page_43" /></a>
-
*/
+
<a href="#"><img id="slide-43" src="data/images/zephyr_part_drawings_page_44.jpg" alt="zephyr_part_drawings_Page_44" title="zephyr_part_drawings_Page_44" /></a>
-
.slider input[name='slide_switch']:checked+label+img {
+
-
opacity: 1;
+
-
transform: scale(1);
+
-
}
+
-
</style>
+
-
</html>
+
-
 
+
-
<html>
+
-
    <style type="text/css">
+
-
* {margin: 0; padding: 0;}
+
-
 
+
-
+
-
.slider2{
+
-
width: 700px; /*Same as width of the large image*/
+
-
position: relative;
+
-
/*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);
+
-
}
+
-
+
-
+
-
/*Last thing remaining is to add transitions*/
+
-
.slider2>img{
+
-
position: absolute;
+
-
left: 200px; top: 5px;
+
-
transition: all 0.5s;
+
-
}
+
-
+
-
.slider2 input[name='slide_switch'] {
+
-
display: none;
+
-
}
+
-
+
-
.slider2 label {
+
-
/*Lets add some spacing for the thumbnails*/
+
-
 
+
-
        margin: 0px 0 50 0px;
+
-
border: 3px solid #999;
+
-
 
+
-
float: left;
+
-
cursor: pointer;
+
-
transition: all 0.5s;
+
-
     
+
-
/*Default style = low opacity*/
+
-
opacity: 0.6;
+
-
}
+
-
+
-
.slider2 label img{
+
-
display: block;
+
-
}
+
-
+
-
/*Time to add the click effects*/
+
-
.slider2 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*/
+
-
.slider2 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
+
-
*/
+
-
.slider2 input[name='slide_switch']:checked+label+img {
+
-
opacity: 1;
+
-
transform: scale(1);
+
-
}
+
-
</style>
+
-
</html>
+
-
 
+
-
<html>
+
-
 
+
-
 
+
-
 
+
-
<!--FIRST COLUMN  SLIDER CREATED-->
+
-
+
-
 
+
-
<div class="slider">
+
-
<input type="radio" name="slide_switch" id="id1" checked="checked"/>
+
-
<label for="id1">
+
-
<img src="https://static.igem.org/mediawiki/2013/3/39/Zephyr_part_drawings_Page_01_small.png" width="50px" height="70px"/>
+
-
</label>
+
-
<img src="https://static.igem.org/mediawiki/2013/5/5c/Zephyr_part_drawings_Page_01.png" width="519px"/>
+
-
 
+
-
<input type="radio" name="slide_switch" id="id3"/>
+
-
<label for="id3">
+
-
<img src="https://static.igem.org/mediawiki/2013/3/39/Zephyr_part_drawings_Page_01_small.png" width="50px" height="70px"/>
+
-
</label>
+
-
<img src="https://static.igem.org/mediawiki/2013/a/a4/Zephyr_part_drawings_Page_03.png" width="519px"/>
+
-
+
</div>
</div>
-
 
+
<div class="slideshow-thumbnails">
-
<!--Second SLIDER CREATED-->
+
<ul>
-
 
+
<li><a href="#slide-0"><img src="data/thumbnails/zephyr_part_drawings_page_01.jpg" alt="zephyr_part_drawings_Page_01" /></a></li>
-
<div class="slider2">
+
<li><a href="#slide-1"><img src="data/thumbnails/zephyr_part_drawings_page_02.jpg" alt="zephyr_part_drawings_Page_02" /></a></li>
-
<input type="radio" name="slide_switch" id="id2"/>
+
<li><a href="#slide-2"><img src="data/thumbnails/zephyr_part_drawings_page_03.jpg" alt="zephyr_part_drawings_Page_03" /></a></li>
-
<label for="id2">
+
<li><a href="#slide-3"><img src="data/thumbnails/zephyr_part_drawings_page_04.jpg" alt="zephyr_part_drawings_Page_04" /></a></li>
-
<img src="https://static.igem.org/mediawiki/2013/7/76/Zephyr_part_drawings_Page_02_Smal.png" width="50px" height="70px" />
+
<li><a href="#slide-4"><img src="data/thumbnails/zephyr_part_drawings_page_05.jpg" alt="zephyr_part_drawings_Page_05" /></a></li>
-
</label>
+
<li><a href="#slide-5"><img src="data/thumbnails/zephyr_part_drawings_page_06.jpg" alt="zephyr_part_drawings_Page_06" /></a></li>
-
<img src="https://static.igem.org/mediawiki/2013/f/f7/Zephyr_part_drawings_Page_02.png" width="519px"/>
+
<li><a href="#slide-6"><img src="data/thumbnails/zephyr_part_drawings_page_07.jpg" alt="zephyr_part_drawings_Page_07" /></a></li>
-
+
<li><a href="#slide-7"><img src="data/thumbnails/zephyr_part_drawings_page_08.jpg" alt="zephyr_part_drawings_Page_08" /></a></li>
-
 
+
<li><a href="#slide-8"><img src="data/thumbnails/zephyr_part_drawings_page_09.jpg" alt="zephyr_part_drawings_Page_09" /></a></li>
-
<input type="radio" name="slide_switch" id="id4"/>
+
<li><a href="#slide-9"><img src="data/thumbnails/zephyr_part_drawings_page_10.jpg" alt="zephyr_part_drawings_Page_10" /></a></li>
-
<label for="id4">
+
<li><a href="#slide-10"><img src="data/thumbnails/zephyr_part_drawings_page_11.jpg" alt="zephyr_part_drawings_Page_11" /></a></li>
-
<img src="https://static.igem.org/mediawiki/2013/7/76/Zephyr_part_drawings_Page_02_Smal.png" width="50px" height="70px" />
+
<li><a href="#slide-11"><img src="data/thumbnails/zephyr_part_drawings_page_12.jpg" alt="zephyr_part_drawings_Page_12" /></a></li>
-
</label>
+
<li><a href="#slide-12"><img src="data/thumbnails/zephyr_part_drawings_page_13.jpg" alt="zephyr_part_drawings_Page_13" /></a></li>
-
<img src="https://static.igem.org/mediawiki/2013/f/f7/Zephyr_part_drawings_Page_02.png" width="519px"/>
+
<li><a href="#slide-13"><img src="data/thumbnails/zephyr_part_drawings_page_14.jpg" alt="zephyr_part_drawings_Page_14" /></a></li>
-
+
<li><a href="#slide-14"><img src="data/thumbnails/zephyr_part_drawings_page_15.jpg" alt="zephyr_part_drawings_Page_15" /></a></li>
-
<!--Lets show the second image by default on page load-->
+
<li><a href="#slide-15"><img src="data/thumbnails/zephyr_part_drawings_page_16.jpg" alt="zephyr_part_drawings_Page_16" /></a></li>
-
+
<li><a href="#slide-16"><img src="data/thumbnails/zephyr_part_drawings_page_17.jpg" alt="zephyr_part_drawings_Page_17" /></a></li>
-
 
+
<li><a href="#slide-17"><img src="data/thumbnails/zephyr_part_drawings_page_18.jpg" alt="zephyr_part_drawings_Page_18" /></a></li>
-
+
<li><a href="#slide-18"><img src="data/thumbnails/zephyr_part_drawings_page_19.jpg" alt="zephyr_part_drawings_Page_19" /></a></li>
-
 
+
<li><a href="#slide-19"><img src="data/thumbnails/zephyr_part_drawings_page_20.jpg" alt="zephyr_part_drawings_Page_20" /></a></li>
-
 
+
<li><a href="#slide-20"><img src="data/thumbnails/zephyr_part_drawings_page_21.jpg" alt="zephyr_part_drawings_Page_21" /></a></li>
 +
<li><a href="#slide-21"><img src="data/thumbnails/zephyr_part_drawings_page_22.jpg" alt="zephyr_part_drawings_Page_22" /></a></li>
 +
<li><a href="#slide-22"><img src="data/thumbnails/zephyr_part_drawings_page_23.jpg" alt="zephyr_part_drawings_Page_23" /></a></li>
 +
<li><a href="#slide-23"><img src="data/thumbnails/zephyr_part_drawings_page_24.jpg" alt="zephyr_part_drawings_Page_24" /></a></li>
 +
<li><a href="#slide-24"><img src="data/thumbnails/zephyr_part_drawings_page_25.jpg" alt="zephyr_part_drawings_Page_25" /></a></li>
 +
<li><a href="#slide-25"><img src="data/thumbnails/zephyr_part_drawings_page_26.jpg" alt="zephyr_part_drawings_Page_26" /></a></li>
 +
<li><a href="#slide-26"><img src="data/thumbnails/zephyr_part_drawings_page_27.jpg" alt="zephyr_part_drawings_Page_27" /></a></li>
 +
<li><a href="#slide-27"><img src="data/thumbnails/zephyr_part_drawings_page_28.jpg" alt="zephyr_part_drawings_Page_28" /></a></li>
 +
<li><a href="#slide-28"><img src="data/thumbnails/zephyr_part_drawings_page_29.jpg" alt="zephyr_part_drawings_Page_29" /></a></li>
 +
<li><a href="#slide-29"><img src="data/thumbnails/zephyr_part_drawings_page_30.jpg" alt="zephyr_part_drawings_Page_30" /></a></li>
 +
<li><a href="#slide-30"><img src="data/thumbnails/zephyr_part_drawings_page_31.jpg" alt="zephyr_part_drawings_Page_31" /></a></li>
 +
<li><a href="#slide-31"><img src="data/thumbnails/zephyr_part_drawings_page_32.jpg" alt="zephyr_part_drawings_Page_32" /></a></li>
 +
<li><a href="#slide-32"><img src="data/thumbnails/zephyr_part_drawings_page_33.jpg" alt="zephyr_part_drawings_Page_33" /></a></li>
 +
<li><a href="#slide-33"><img src="data/thumbnails/zephyr_part_drawings_page_34.jpg" alt="zephyr_part_drawings_Page_34" /></a></li>
 +
<li><a href="#slide-34"><img src="data/thumbnails/zephyr_part_drawings_page_35.jpg" alt="zephyr_part_drawings_Page_35" /></a></li>
 +
<li><a href="#slide-35"><img src="data/thumbnails/zephyr_part_drawings_page_36.jpg" alt="zephyr_part_drawings_Page_36" /></a></li>
 +
<li><a href="#slide-36"><img src="data/thumbnails/zephyr_part_drawings_page_37.jpg" alt="zephyr_part_drawings_Page_37" /></a></li>
 +
<li><a href="#slide-37"><img src="data/thumbnails/zephyr_part_drawings_page_38.jpg" alt="zephyr_part_drawings_Page_38" /></a></li>
 +
<li><a href="#slide-38"><img src="data/thumbnails/zephyr_part_drawings_page_39.jpg" alt="zephyr_part_drawings_Page_39" /></a></li>
 +
<li><a href="#slide-39"><img src="data/thumbnails/zephyr_part_drawings_page_40.jpg" alt="zephyr_part_drawings_Page_40" /></a></li>
 +
<li><a href="#slide-40"><img src="data/thumbnails/zephyr_part_drawings_page_41.jpg" alt="zephyr_part_drawings_Page_41" /></a></li>
 +
<li><a href="#slide-41"><img src="data/thumbnails/zephyr_part_drawings_page_42.jpg" alt="zephyr_part_drawings_Page_42" /></a></li>
 +
<li><a href="#slide-42"><img src="data/thumbnails/zephyr_part_drawings_page_43.jpg" alt="zephyr_part_drawings_Page_43" /></a></li>
 +
<li><a href="#slide-43"><img src="data/thumbnails/zephyr_part_drawings_page_44.jpg" alt="zephyr_part_drawings_Page_44" /></a></li>
 +
</ul>
</div>
</div>
-
 
+
<a id="vlb" href="http://visualslideshow.com">Flickr Slideshow by VisualSlideshow.com v2.0</a>
-
 
+
</div>
-
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
+
<!-- End VisualSlideShow.com BODY section -->
-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+
</body>
-
<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>
+
-
 
+
-
 
+
</html>
</html>

Revision as of 10:33, 25 September 2013


Zephyr


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

Drawings

> Visual Slideshow generated by VisualSlideshow.com
Retrieved from "http://2013.igem.org/Team:TU-Delft/Zephyr"