Template:ETHZ Basel10 Teaser

From 2010.igem.org

(Difference between revisions)
 
(48 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
<style type="text/css">
<style type="text/css">
-
#bodyContent a{
 
-
/* format link color*/
 
-
color: #000000;
 
-
}
 
#teaser {
#teaser {
margin: 0; padding: 0;
margin: 0; padding: 0;
Line 11: Line 7:
a.teaserlink {
a.teaserlink {
display: block;
display: block;
-
color: #000;
+
color: #fff;
 +
text-decoration: none;
 +
 
}
}
:hover.teaserlink {
:hover.teaserlink {
-
text-decoration: none;
 
-
}
 
-
.main_image a.teaserlink {
 
-
display: block;
 
-
color: #fff;
 
-
}
 
-
.main_image :hover.teaserlink {
 
-
color: #89D194;
 
text-decoration: none;
text-decoration: none;
}
}
Line 37: Line 27:
/*--Main Image Preview--*/
/*--Main Image Preview--*/
.main_image {
.main_image {
-
width: 598px; height: 456px;
+
width: 598px; height: 502px;
float: left;
float: left;
background: #333;
background: #333;
border: 1px solid #ccc;
border: 1px solid #ccc;
-
position: relative;
 
-
overflow: hidden;
 
color: #fff;
color: #fff;
}
}
Line 65: Line 53:
.main_image .block small {margin-left: 10px;}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
.main_image .desc{
-
position: absolute;
+
display: block;
-
bottom: 0; left: 0;
+
position: relative;
width: 100%;
width: 100%;
-
display: none;
 
}
}
.main_image .block{
.main_image .block{
width: 100%;
width: 100%;
-
background: #111;
+
height: 169px;
-
background-image: url()
+
background: #000;
-
border-top: 1px solid #000;
+
border-top: 1px solid #ccc;
 +
border-bottom: 1px solid #ccc;
}
}
-
.main_image a.collapse {
 
-
height: 27px; width: 93px;
 
-
text-indent: -99999px;
 
-
position: absolute;
 
-
top: -27px; right: 20px;
 
-
}
 
-
.main_image a.show {background-position: left bottom;}
 
-
 
.image_thumb {
.image_thumb {
Line 103: Line 83:
}
}
.image_thumb ul li{
.image_thumb ul li{
 +
display: block;
margin: 0; padding: 10px 10px;
margin: 0; padding: 10px 10px;
background: #f0f0f0;
background: #f0f0f0;
Line 110: Line 91:
border-right: 1px solid #ccc;
border-right: 1px solid #ccc;
}
}
-
.image_thumb ul li.hover {
+
.image_thumb ul li:hover, .image_thumb ul li.active {
-
background: #ddd;
+
background: #B6F3BF;
cursor: pointer;
cursor: pointer;
-
}
 
-
.image_thumb ul li.active {
 
-
background: #fff;
 
-
cursor: default;
 
}
}
html .image_thumb ul li h2 {
html .image_thumb ul li h2 {
Line 131: Line 108:
}
}
.image_thumb ul li p{display: none;}
.image_thumb ul li p{display: none;}
-
 
-
 
</style>
</style>
-
<!--Call jQuery-->
 
-
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
<script type="text/javascript">
 +
// Main function
$(document).ready(function() {
$(document).ready(function() {
-
 
+
// Hide all main_image, until one is activated.
-
//Show Banner
+
$(".main_image").hide();
-
$(".main_image .desc").show(); //Show Banner
+
// Activate first banner
-
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
+
$(".main_image:first").show();
//Click and Hover events for thumbnail list
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');  
$(".image_thumb ul li:first").addClass('active');  
-
$(".image_thumb ul li").click(function(){  
+
$(".image_thumb ul li").hover(function(){  
-
//Set Variables
+
-
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
+
-
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
+
-
var imgDesc = $(this).find('.block').html(); //Get HTML of block
+
-
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
+
-
+
-
if ($(this).is(".active")) {  //If it's already active, then...
+
-
return false; // Don't click through
+
-
} else {
+
-
//Animate the Teaser
+
-
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
+
-
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
+
-
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
+
-
});
+
-
}
+
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
Line 172: Line 131:
$(this).removeClass('hover');
$(this).removeClass('hover');
});
});
-
+
});
-
//Toggle Teaser
+
 
-
$("a.collapse").click(function(){
+
// Switch banner
-
$(".main_image .block").slideToggle();
+
function switchbanner(category){
-
$("a.collapse").toggleClass("show");
+
$(".main_image").hide();
-
});
+
$(category).show();
-
+
};
-
});//Close Function
+
</script>
</script>
</head>
</head>
Line 185: Line 143:
<div id="teaser">
<div id="teaser">
<div id="main" class="container">
<div id="main" class="container">
-
<div class="main_image">
+
<div class="main_image" id="motivation">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation" class="teaserlink">
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
-
<div class="desc" style="display: block; ">
+
<div class="desc">
-
<div class="block" style="display: block; opacity: 0.85; margin-bottom: 0px; ">
+
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction" class="teaserlink">
+
<h2>Motivation & Project Idea</h2>
-
<h2>Introduction</h2>
+
<small>What is E. lemming?</small>
<small>What is E. lemming?</small>
-
<p>E. lemming is the 2010 iGEM project of ETH Zurich. We intend to control movement of a single <i>E. coli</i> bacterium by hijacking chemotaxis and monitoring of position and direction of the bacterium by image processing algorithms, which are linked to a controller device. Find out more by watching animations of the project overview!</p>
+
<p>E. lemming is the 2010 iGEM project of ETH Zurich. We control the movement of a single genetically modified <i>E. coli</i> bacterium by hijacking chemotaxis. Position and direction of the bacterium is monitored by image processing algorithms, which are linked to a controller device. Find out more about our motivation and project idea!</p>
-
</a>
+
</div>
</div>
</div>
-
</div>
+
</a>
</div>
</div>
-
<div class="image_thumb">
+
<div class="main_image" id="movie">
-
<ul>
+
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie" class="teaserlink">
-
<li class="">
+
<img src="https://static.igem.org/mediawiki/2010/e/e8/ETHZ_Basel_teaser_movie.png">
-
<a href="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png"><img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png"></a>
+
<div class="desc">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction" class="teaserlink">
+
<h2>E. lemming - The Movie</h2>
-
<h2>Introduction</h2>
+
<small>Watch a short animation of the project idea!</small>
-
<small>What is E. lemming?</small>
+
-
+
<p>We created a short animation about the project idea and general concept of E. lemming. Find out, how we combine biology and information processing to create E. lemming.</p>
-
<p>E. lemming is the 2010 iGEM project of ETH Zurich. We intend to control movement of a single <i>E. coli</i> bacterium by hijacking chemotaxis and monitoring of position and direction of the bacterium by image processing algorithms, which are linked to a controller device. Find out more by watching animations of the project overview!</p>
+
-
</a>
+
</div>
</div>
-
</li>
+
</div>
-
<li class="">
+
</a>
-
<a href="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png"><img src="https://static.igem.org/mediawiki/2010/f/f9/ETHZ_Basel_teaser_biology_thumb.png"></a>
+
</div>
 +
<div class="main_image" id="biology">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png">
 +
<div class="desc">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">
 
<h2>Biology & Wet Laboratory</h2>
<h2>Biology & Wet Laboratory</h2>
<small>How is it implemented?</small>
<small>How is it implemented?</small>
-
<p>By coupling chemotactic receptor proteins to a novel synthetic light-sensitive spatial localization system, their activity can be controlled reversibly. To find out more about our project on the molecular level and to find information regarding the biological implementation and an overview about the conducted wet laboratory experiments, visit this section.</p>
+
<p>By coupling proteins of the chemotaxis pathway to a light-sensitive spatial localization system, the chemotaxis activity can be controlled reversibly. To find out more about our project on the molecular level and its biological implementation, visit this section.</p>
-
</a>
+
</div>
</div>
-
</li>
+
</div>
-
<li class="">
+
</a>
-
<a href="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png"><img src="https://static.igem.org/mediawiki/2010/1/1f/ETHZ_Basel_teaser_molecular_models_thumb.png"></a>
+
</div>
 +
<div class="main_image" id="modeling">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png">
 +
<div class="desc">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
+
<h2>Mathematical Modeling</h2>
-
<h2>Molecular Modeling</h2>
+
<small>How does modeling help?</small>
<small>How does modeling help?</small>
-
<p>Molecular modeling supports analysis of biological systems since the advent of synthetic biology. Find out, how this not only supported wet laboratory experiments by providing time and effort alleviating parameter selection, but also provided a test bench for the information processing part.</p>
+
<p>Mathematical modeling supports analysis of biological systems since the advent of synthetic biology. Find out, how this supported wet laboratory experiments by providing time and effort alleviating network structure and experimental design selection. In addition, the combined model was a perfect test bench for information processing.</p>
-
</a>
+
</div>
</div>
-
</li>
+
</div>
-
<li class="">
+
</a>
-
<a href="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png"><img src="https://static.igem.org/mediawiki/2010/5/52/ETHZ_Basel_teaser_information_processing_thumb.png"></a>
+
</div>
 +
<div class="main_image" id="information">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png">
 +
<div class="desc">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">
 
<h2>Information Processing</h2>
<h2>Information Processing</h2>
<small>How is it controlled?</small>
<small>How is it controlled?</small>
-
<p>Implementation of a comprehensive information processing workflow for controlling E. lemming was achieved by combination of microscopy, image processing, cell detection and a controller. Find out more about how this not only created E. lemming but also created a new application for synthetic biology: Gaming!</p>
+
<p>Implementation of a comprehensive information processing workflow for controlling E. lemming was achieved by combination of microscopy, image processing, cell detection and a controller. Find out more about how this not only created E. lemming, but also created a new application for synthetic biology: Gaming!</p>
-
</a>
+
</div>
 +
</div>
 +
</a>
 +
</div>
 +
<div class="main_image" id="achievements">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Achievements" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/9/90/ETHZ_Basel_teaser_achievements.png">
 +
<div class="desc">
 +
<div class="block">
 +
<h2>Achievements</h2>
 +
<small>What was achieved?</small>
 +
<p>See videos of E. lemming in action! We created a BioBrick and a Matlab Toolkit, which can be used for similar projects. Learn more about our comprehensive systems design and systems implementation approaches, which were necessary for the success of E. lemming.</p>
 +
</div>
 +
</div>
 +
</a>
 +
</div>
 +
<div class="main_image" id="team">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Team" class="teaserlink">
 +
<img src="https://static.igem.org/mediawiki/2010/b/b1/ETHZ_Basel_teaser_team.png">
 +
<div class="desc">
 +
<div class="block">
 +
<h2>Team</h2>
 +
<small>Who is behind E. lemming?</small>
 +
 +
<p>Find out who created E. lemming and learn about the different backgrounds of the people who tried to achieve these common goals: Having a great experience and going crazy with E. lemming!</p>
 +
</div>
 +
</div>
 +
</a>
 +
</div>
 +
<div class="image_thumb">
 +
<ul>
 +
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation'" onmouseover="switchbanner('#motivation')">
 +
<img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png">
 +
<div class="block">
 +
<h2>Motivation & Project Idea</h2>
 +
<small>What is E. lemming?</small>
 +
</div>
 +
</li>
 +
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie'" onmouseover="switchbanner('#movie')">
 +
<img src="https://static.igem.org/mediawiki/2010/4/4f/ETHZ_Basel_teaser_movie_thumb.png">
 +
<div class="block">
 +
<h2>E. lemming - The Movie</h2>
 +
<small>Watch a short animation!</small>
 +
</div>
 +
</li>
 +
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Biology'" onmouseover="switchbanner('#biology')">
 +
<img src="https://static.igem.org/mediawiki/2010/f/f9/ETHZ_Basel_teaser_biology_thumb.png">
 +
<div class="block">
 +
<h2>Biology & Wet Laboratory</h2>
 +
<small>How is it implemented?</small>
 +
</div>
 +
</li>
 +
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Modeling'" onmouseover="switchbanner('#modeling')">
 +
<img src="https://static.igem.org/mediawiki/2010/1/1f/ETHZ_Basel_teaser_molecular_models_thumb.png">
 +
<div class="block">
 +
<h2>Mathematical Modeling</h2>
 +
<small>How does modeling help?</small>
 +
</div>
 +
</li>
 +
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing'" onmouseover="switchbanner('#information')">
 +
<img src="https://static.igem.org/mediawiki/2010/5/52/ETHZ_Basel_teaser_information_processing_thumb.png">
 +
<div class="block">
 +
<h2>Information Processing</h2>
 +
<small>How is it controlled?</small>
 +
</div>
 +
</li>
 +
<li class=""  onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Achievements'" onmouseover="switchbanner('#achievements')">
 +
<img src="https://static.igem.org/mediawiki/2010/b/b1/ETHZ_Basel_teaser_achievements_thumb.png">
 +
<div class="block">
 +
<h2>Achievements</h2>
 +
<small>What was achieved?</small>
 +
</div>
 +
</li>
 +
<li class=""  onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Team'" onmouseover="switchbanner('#team')">
 +
<img src="https://static.igem.org/mediawiki/2010/7/76/ETHZ_Basel_teaser_team_thumb.png">
 +
<div class="block">
 +
<h2>Team</h2>
 +
<small>Who is behind E. lemming?</small>
</div>
</div>
</li>
</li>

Latest revision as of 13:18, 27 October 2010

  • Motivation & Project Idea

    What is E. lemming?

  • E. lemming - The Movie

    Watch a short animation!

  • Biology & Wet Laboratory

    How is it implemented?

  • Mathematical Modeling

    How does modeling help?

  • Information Processing

    How is it controlled?

  • Achievements

    What was achieved?

  • Team

    Who is behind E. lemming?

Retrieved from "http://2010.igem.org/Template:ETHZ_Basel10_Teaser"