Template:ETHZ Basel10 Teaser

From 2010.igem.org

(Difference between revisions)
Line 7: Line 7:
a.teaserlink {
a.teaserlink {
display: block;
display: block;
-
color: #000;
+
color: #fff;
}
}
:hover.teaserlink {
:hover.teaserlink {
-
text-decoration: none;
 
-
}
 
-
.main_image a.teaserlink {
 
-
display: block;
 
-
color: #fff;
 
-
}
 
-
.main_image :hover.teaserlink {
 
color: #89D194;
color: #89D194;
text-decoration: none;
text-decoration: none;
Line 61: Line 54:
.main_image .block small {margin-left: 10px;}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
.main_image .desc{
 +
display: block;
position: absolute;
position: absolute;
bottom: 0; left: 0;
bottom: 0; left: 0;
Line 107: Line 101:
border-right: 1px solid #ccc;
border-right: 1px solid #ccc;
}
}
-
.image_thumb ul li.hover {
+
.image_thumb ul li:hover {
-
background: #B6F3BF;
+
-
cursor: pointer;
+
-
}
+
-
.image_thumb ul li.active {
+
background: #B6F3BF;
background: #B6F3BF;
cursor: hand;
cursor: hand;
-
}
 
-
.image_thumb ul li a {
 
-
display: block;
 
}
}
html .image_thumb ul li h2 {
html .image_thumb ul li h2 {
Line 135: Line 122:
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function() {
 +
// Hide all main_image, until one is activated.
 +
$(".main_image").hide();
 +
// Activate first banner
 +
$("#motivation").show();
 +
});
-
//Show Banner
+
// Switch banner
-
$(".main_image .desc").show(); //Show Banner
+
function switchbanner(category){
-
$(".main_image .block").animate({ opacity: 0.85 } ); //Set Opacity
+
$(".main_image").hide();
-
 
+
$(category).show();
-
//Click and Hover events for thumbnail list
+
};
-
$(".image_thumb ul li:first").addClass('active');
+
-
$(".image_thumb ul li").hover(function(){  
+
-
//Set Variables
+
-
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
+
-
var imgTitle = $(this).find('lk').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.85} , function() {
+
-
$(".main_image .block").html(imgDesc);
+
-
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
+
-
});
+
-
}
+
-
+
-
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
+
-
$(this).addClass('active');  //add class of 'active' on this list only
+
-
return false;
+
-
+
-
}) .hover(function(){
+
-
$(this).addClass('hover');
+
-
}, function() {
+
-
$(this).removeClass('hover');
+
-
});
+
-
+
-
//Toggle Teaser
+
-
$("a.collapse").click(function(){
+
-
$(".main_image .block").slideToggle();
+
-
$("a.collapse").toggleClass("show");
+
-
});
+
-
+
-
});//Close Function
+
</script>
</script>
</head>
</head>
Line 181: Line 138:
<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">
<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" style="display: block; ">
-
<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/Motivation" class="teaserlink">
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation" class="teaserlink">
<h2>Motivation & Project Idea</h2>
<h2>Motivation & Project Idea</h2>
Line 190: Line 147:
<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 about our motivation and project idea!</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 about our motivation and project idea!</p>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="main_image" id="movie">
 +
<img src="https://static.igem.org/mediawiki/2010/8/84/ETHZ_Basel_teaser_project.png">
 +
<div class="desc" style="display: block; ">
 +
<div class="block">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie" class="teaserlink">
 +
<h2>E. lemming - The Movie</h2>
 +
<small>Watch a short animation of the project idea!</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>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="main_image" id="biology">
 +
<img src="https://static.igem.org/mediawiki/2010/3/3f/ETHZ_Basel_teaser_biology.png">
 +
<div class="desc" style="display: block; ">
 +
<div class="block">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Biology" class="teaserlink">
 +
<h2>Biology & Wet Laboratory</h2>
 +
<small>How is it implemented?</small>
 +
 +
<p>By coupling proteins of the chemotaxis pathway to a 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>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="main_image" id="modeling">
 +
<img src="https://static.igem.org/mediawiki/2010/1/16/ETHZ_Basel_teaser_molecular_models.png">
 +
<div class="desc" style="display: block; ">
 +
<div class="block">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
 +
<h2>Mathematical Modeling</h2>
 +
<small>How does modeling help?</small>
 +
 +
<p>Mathematical 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 network structure and experimental setup selection, but also provided a test bench for the information processing part.</p>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="main_image" id="information">
 +
<img src="https://static.igem.org/mediawiki/2010/2/21/ETHZ_Basel_teaser_information_processing.png">
 +
<div class="desc" style="display: block; ">
 +
<div class="block">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing" class="teaserlink">
 +
<h2>Information Processing</h2>
 +
<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>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="main_image" id="achievements">
 +
<img src="https://static.igem.org/mediawiki/2010/9/90/ETHZ_Basel_teaser_achievements.png">
 +
<div class="desc" style="display: block; ">
 +
<div class="block">
 +
<a href="https://2010.igem.org/Team:ETHZ_Basel/Achievements" class="teaserlink">
 +
<h2>Achievements</h2>
 +
<small>What was achieved?</small>
 +
 +
<p>We created for E. lemming a BioBrick and a Matlab Toolkit. Find out, how this tools can be used for similar projects and learn more about the unique interworking between computer science and biology, which was necessary for the success of E. lemming.</p>
</a>
</a>
</div>
</div>
Line 196: Line 218:
<div class="image_thumb">
<div class="image_thumb">
<ul>
<ul>
-
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation'">
+
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation'" onmouseover="switchbanner('#motivation')">
-
<lk 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">
+
<img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Motivation" class="teaserlink">
+
<h2>Motivation & Project Idea</h2>
-
<h2>Motivation & Project Idea</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 about our motivation and project idea!</p>
+
-
</a>
+
</div>
</div>
</li>
</li>
-
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie'">
+
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie'" onmouseover="switchbanner('#movie')">
-
<lk 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">
+
<img src="https://static.igem.org/mediawiki/2010/b/bd/ETHZ_Basel_teaser_project_thumb.png">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Introduction/Movie" class="teaserlink">
+
<h2>E. lemming - The Movie</h2>
-
<h2>E. lemming - The Movie</h2>
+
<small>Watch a short animation of the project idea!</small>
-
<small>Watch a short animation of the project idea!</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>
+
-
</a>
+
</div>
</div>
</li>
</li>
-
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Biology'">
+
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Biology'" onmouseover="switchbanner('#biology')">
-
<lk 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">
+
<img src="https://static.igem.org/mediawiki/2010/f/f9/ETHZ_Basel_teaser_biology_thumb.png">
<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 proteins of the chemotaxis pathway to a 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>
+
-
</a>
+
</div>
</div>
</li>
</li>
-
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Modeling'">
+
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Modeling'" onmouseover="switchbanner('#modeling')">
-
<lk 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">
+
<img src="https://static.igem.org/mediawiki/2010/1/1f/ETHZ_Basel_teaser_molecular_models_thumb.png">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Modeling" class="teaserlink">
+
<h2>Mathematical Modeling</h2>
-
<h2>Mathematical Modeling</h2>
+
<small>How does modeling help?</small>
-
<small>How does modeling help?</small>
+
-
+
-
<p>Mathematical 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 network structure and experimental setup selection, but also provided a test bench for the information processing part.</p>
+
-
</a>
+
</div>
</div>
</li>
</li>
-
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing'">
+
<li class="" onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/InformationProcessing'" onmouseover="switchbanner('#information')">
-
<lk 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">
+
<img src="https://static.igem.org/mediawiki/2010/5/52/ETHZ_Basel_teaser_information_processing_thumb.png">
<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>
+
-
</a>
+
</div>
</div>
</li>
</li>
-
<li class=""  onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Achievements'">
+
<li class=""  onclick="document.location.href='https://2010.igem.org/Team:ETHZ_Basel/Achievements'" onmouseover="switchbanner('#achievements')">
-
<lk href="https://static.igem.org/mediawiki/2010/9/90/ETHZ_Basel_teaser_achievements.png"><img src="https://static.igem.org/mediawiki/2010/b/b1/ETHZ_Basel_teaser_achievements_thumb.png">
+
<img src="https://static.igem.org/mediawiki/2010/b/b1/ETHZ_Basel_teaser_achievements_thumb.png">
<div class="block">
<div class="block">
-
<a href="https://2010.igem.org/Team:ETHZ_Basel/Achievements" class="teaserlink">
+
<h2>Achievements</h2>
-
<h2>Achievements</h2>
+
<small>What was achieved?</small>
-
<small>What was achieved?</small>
+
-
+
-
<p>We created for E. lemming a BioBrick and a Matlab Toolkit. Find out, how this tools can be used for similar projects and learn more about the unique interworking between computer science and biology, which was necessary for the success of E. lemming.</p>
+
-
</a>
+
</div>
</div>
</li>
</li>

Revision as of 20:10, 20 October 2010

  • Motivation & Project Idea

    What is E. lemming?

  • E. lemming - The Movie

    Watch a short animation of the project idea!

  • Biology & Wet Laboratory

    How is it implemented?

  • Mathematical Modeling

    How does modeling help?

  • Information Processing

    How is it controlled?

  • Achievements

    What was achieved?

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