Team:SEU A/Humanpractice

From 2012.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 26: Line 26:
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.masonry.min.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.masonry.min.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
-
<script type="text/javascript">
 
-
$(window).load(function(){
 
-
var $iw_thumbs = $('#iw_thumbs'),
 
-
$iw_ribbon = $('#iw_ribbon'),
 
-
$iw_ribbon_close = $iw_ribbon.children('span.iw_close'),
 
-
$iw_ribbon_zoom = $iw_ribbon.children('span.iw_zoom');
 
-
 
-
ImageWall = (function() {
 
-
// window width and height
 
-
var w_dim,
 
-
    // index of current image
 
-
current = -1,
 
-
isRibbonShown = false,
 
-
isFullMode = false,
 
-
// ribbon / images animation settings
 
-
ribbonAnim = {speed : 500, easing : 'easeOutExpo'},
 
-
imgAnim = {speed : 400, easing : 'jswing'},
 
-
// init function : call masonry, calculate window dimentions, initialize some events
 
-
init = function() {
 
-
$iw_thumbs.imagesLoaded(function(){
 
-
$iw_thumbs.masonry({
 
-
isAnimated : true
 
-
});
 
-
});
 
-
getWindowsDim();
 
-
initEventsHandler();
 
-
},
 
-
// calculate window dimentions
 
-
getWindowsDim = function() {
 
-
w_dim = {
 
-
width : $(window).width(),
 
-
height : $(window).height()
 
-
};
 
-
},
 
-
// initialize some events
 
-
initEventsHandler = function() {
 
-
 
-
// click on a image
 
-
$iw_thumbs.delegate('li', 'click', function() {
 
-
if($iw_ribbon.is(':animated')) return false;
 
-
 
-
var $el = $(this);
 
-
 
-
if($el.data('ribbon')) {
 
-
showFullImage($el);
 
-
}
 
-
else if(!isRibbonShown) {
 
-
isRibbonShown = true;
 
-
 
-
$el.data('ribbon',true);
 
-
 
-
// set the current
 
-
current = $el.index();
 
-
 
-
showRibbon($el);
 
-
}
 
-
});
 
-
 
-
// click ribbon close
 
-
$iw_ribbon_close.bind('click', closeRibbon);
 
-
 
-
// on window resize we need to recalculate the window dimentions
 
-
$(window).bind('resize', function() {
 
-
getWindowsDim();
 
-
if($iw_ribbon.is(':animated'))
 
-
return false;
 
-
closeRibbon();
 
-
})
 
-
        .bind('scroll', function() {
 
-
if($iw_ribbon.is(':animated'))
 
-
return false;
 
-
closeRibbon();
 
-
});
 
-
 
-
},
 
-
showRibbon = function($el) {
 
-
var $img = $el.children('img'),
 
-
$descrp = $img.next();
 
-
 
-
// fadeOut all the other images
 
-
$iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);
 
-
 
-
// increase the image z-index, and set the height to 100px (default height)
 
-
$img.css('z-index', 100)
 
-
.data('originalHeight',$img.height())
 
-
.stop()
 
-
.animate({
 
-
height : '100px'
 
-
}, imgAnim.speed, imgAnim.easing);
 
-
 
-
// the ribbon will animate from the left or right
 
-
// depending on the position of the image
 
-
var ribbonCssParam = {
 
-
top : $el.offset().top - $(window).scrollTop() - 6 + 'px'
 
-
},
 
-
descriptionCssParam,
 
-
dir;
 
-
 
-
if( $el.offset().left < (w_dim.width / 2) ) {
 
-
dir = 'left';
 
-
ribbonCssParam.left = 0;
 
-
ribbonCssParam.right = 'auto';
 
-
}
 
-
else {
 
-
dir = 'right';
 
-
ribbonCssParam.right = 0;
 
-
ribbonCssParam.left = 'auto';
 
-
}
 
-
 
-
$iw_ribbon.css(ribbonCssParam)
 
-
          .show()
 
-
  .stop()
 
-
  .animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {
 
-
switch(dir) {
 
-
case 'left' :
 
-
descriptionCssParam = {
 
-
'left' : $img.outerWidth(true) + 'px',
 
-
'text-align' : 'left'
 
-
};
 
-
break;
 
-
case 'right' :
 
-
descriptionCssParam = {
 
-
'left' : '-200px',
 
-
'text-align' : 'right'
 
-
};
 
-
break;
 
-
};
 
-
$descrp.css(descriptionCssParam).fadeIn();
 
-
// show close button and zoom
 
-
$iw_ribbon_close.show();
 
-
$iw_ribbon_zoom.show();
 
-
  });
 
-
 
-
},
 
-
// close the ribbon
 
-
// when in full mode slides in the middle of the page
 
-
// when not slides left
 
-
closeRibbon = function() {
 
-
isRibbonShown = false
 
-
 
-
$iw_ribbon_close.hide();
 
-
$iw_ribbon_zoom.hide();
 
-
 
-
if(!isFullMode) {
 
-
 
-
// current wall image
 
-
var $el = $iw_thumbs.children('li').eq(current);
 
-
 
-
resetWall($el);
 
-
 
-
// slide out ribbon
 
-
$iw_ribbon.stop()
 
-
  .animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing);
 
-
 
 
-
}
 
-
else {
 
-
$iw_ribbon.stop().animate({
 
-
opacity : 0.8,
 
-
height : '0px',
 
-
marginTop : w_dim.height/2 + 'px' // half of window height
 
-
}, ribbonAnim.speed, function() {
 
-
$iw_ribbon.css({
 
-
'width' : '0%',
 
-
'height' : '126px',
 
-
'margin-top': '0px'
 
-
}).children('img').remove();
 
-
});
 
-
 
-
isFullMode = false;
 
-
}
 
-
},
 
-
resetWall = function($el) {
 
-
var $img = $el.children('img'),
 
-
$descrp = $img.next();
 
-
 
-
$el.data('ribbon',false);
 
-
 
-
// reset the image z-index and height
 
-
$img.css('z-index',1).stop().animate({
 
-
height : $img.data('originalHeight')
 
-
}, imgAnim.speed,imgAnim.easing);
 
-
 
-
// fadeOut the description
 
-
$descrp.fadeOut();
 
-
// fadeIn all the other images
+
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/photowallclick.js?action=raw&ctype=text/javascript"></script>
-
$iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);
+
 
-
},
+
<style type="text/css">h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:10px 0 0 0; text-align:center; }</style>
-
showFullImage = function($el) {
+
<style type="text/css">h2{ font-size:24px; padding:10px; }</style>
-
isFullMode = true;
+
-
+
-
$iw_ribbon_close.hide();
+
-
+
-
var $img = $el.children('img'),
+
-
large = $img.data('img'),
+
-
+
-
// add a loading image on top of the image
+
-
$loading = $('<span class="iw_loading"></span>');
+
-
+
-
$el.append($loading);
+
-
+
-
// preload large image
+
-
$('<img/>').load(function() {
+
-
var $largeImage = $(this);
+
-
+
-
$loading.remove();
+
-
+
-
$iw_ribbon_zoom.hide();
+
-
+
-
resizeImage($largeImage);
+
-
+
-
// reset the current image in the wall
+
-
resetWall($el);
+
-
+
-
// animate ribbon in and out
+
-
$iw_ribbon.stop().animate({
+
-
opacity : 1,
+
-
height : '0px',
+
-
marginTop : '63px' // half of ribbons height
+
-
}, ribbonAnim.speed, function() {
+
-
// add the large image to the DOM
+
-
$iw_ribbon.prepend($largeImage);
+
-
+
-
$iw_ribbon_close.show();
+
-
+
-
$iw_ribbon.animate({
+
-
height : '100%',
+
-
marginTop : '0px',
+
-
top : '0px'
+
-
}, ribbonAnim.speed);
+
-
});
+
-
}).attr('src',large);
+
-
+
-
},
+
-
resizeImage = function($image) {
+
-
var widthMargin = 100,
+
-
heightMargin = 100,
+
-
+
-
windowH      = w_dim.height - heightMargin,
+
-
windowW      = w_dim.width - widthMargin,
+
-
theImage    = new Image();
+
-
+
-
theImage.src    = $image.attr("src");
+
-
+
-
var imgwidth    = theImage.width,
+
-
imgheight    = theImage.height;
+
-
if((imgwidth > windowW) || (imgheight > windowH)) {
 
-
if(imgwidth > imgheight) {
 
-
var newwidth = windowW,
 
-
ratio = imgwidth / windowW,
 
-
newheight = imgheight / ratio;
 
-
 
-
theImage.height = newheight;
 
-
theImage.width = newwidth;
 
-
 
-
if(newheight > windowH) {
 
-
var newnewheight = windowH,
 
-
newratio = newheight/windowH,
 
-
newnewwidth = newwidth/newratio;
 
-
 
-
theImage.width = newnewwidth;
 
-
theImage.height = newnewheight;
 
-
}
 
-
}
 
-
else {
 
-
var newheight = windowH,
 
-
ratio = imgheight / windowH,
 
-
newwidth = imgwidth / ratio;
 
-
 
-
theImage.height = newheight;
 
-
theImage.width = newwidth;
 
-
 
-
if(newwidth > windowW) {
 
-
var newnewwidth = windowW,
 
-
    newratio = newwidth/windowW,
 
-
newnewheight = newheight/newratio;
 
-
 
-
theImage.height = newnewheight;
 
-
theImage.width = newnewwidth;
 
-
}
 
-
}
 
-
}
 
-
 
-
$image.css({
 
-
'width' : theImage.width + 'px',
 
-
'height' : theImage.height + 'px',
 
-
'margin-left' : -theImage.width / 2 + 'px',
 
-
'margin-top' : -theImage.height / 2 + 'px'
 
-
});
 
-
};
 
-
 
-
return {init : init};
 
-
})();
 
-
 
-
ImageWall.init();
 
-
});
 
-
</script>
 
</head>
</head>
Line 337: Line 45:
         <li><a href="https://2012.igem.org/Team:SEU_A/Attributions">Attributions</a></li>
         <li><a href="https://2012.igem.org/Team:SEU_A/Attributions">Attributions</a></li>
         <li><a href="https://2012.igem.org/Team:SEU_A/Team">About Us</a></li>
         <li><a href="https://2012.igem.org/Team:SEU_A/Team">About Us</a></li>
 +
        <li><a href="https://2012.igem.org">iGEM 2012</a></li>
     </ul>
     </ul>
</div>
</div>
Line 344: Line 53:
<img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png">
<img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png">
</div>
</div>
-
    <div class="titleword">
 
-
    Human Practice
 
-
    </div>
 
         <br class="clearfloat" />
         <br class="clearfloat" />
     </header>
     </header>
Line 354: Line 60:
<header>
<header>
<h1>Activities</h1>
<h1>Activities</h1>
-
<span>Enjoy a world of Synthetic Biology</span>
+
<span>Enjoy a world of Synthetic Biology</span></br>
-
</header>
+
</header>  
-
<div class="iw_wrapper">
+
      <a href="https://2012.igem.org/Team:SEU_A/Humanpractice/brain"><img src='https://static.igem.org/mediawiki/2012/b/b3/Seua_hp_brain_storm.png' width='310' height='232.5'></img></a>
-
<ul class="iw_thumbs" id="iw_thumbs">
+
      <a href="https://2012.igem.org/Team:SEU_A/Humanpractice/entertainment"><img src='https://static.igem.org/mediawiki/2012/1/1e/Seua_hp_entertainment.png' width='310' height='232.5'></img></a>
-
<li><img src="https://static.igem.org/mediawiki/2012/b/b3/Seua_fluid_container_team_thumb.png" data-img="https://static.igem.org/mediawiki/2012/9/91/Seua_fluid_container_team.png" alt="Thumb1"/><div><h2>Team</h2><p>We are iGEMers, and we are trying to show you a magical world consisting by Bio Break.</p></div></li>
+
      <a href="https://2012.igem.org/Team:SEU_A/Humanpractice/campus"><img src='https://static.igem.org/mediawiki/2012/b/bb/Seua_hp_campus_perception.png' width='310' height='232.5'></img></a>
-
</ul>
+
 
-
</div>
+
</br></br></br></br>
-
<div id="iw_ribbon" class="iw_ribbon">
+
 
-
<span class="iw_close"></span>
+
      <h2>Overview</h2>
-
<span class="iw_zoom">Click thumb to zoom</span>
+
      Synthetic biology is a new area of biological research and technology that combines science and engineering. It encompasses a variety of different approaches, methodologies, and disciplines with a variety of definitions. The common goal is the design and construction of new biological functions and systems not found in nature.</br>
-
</div>
+
      &nbsp;&nbsp;&nbsp;Actually, people often fail to adopt new ideas timely and tend to dodge the revolutions of new ideas. The hesitation results from lack of relevant knowledge and thus lack of control of unknown areas. We are committed to spread relevant knowledge, communicate with people and motivate innovation.</br></br>
-
</div>
+
 
 +
      <h2>Summary</h2>
 +
      Through six months’ concerted effort, finally we have got some result and we are satisfied with it. On September 20th, we were honored to invite the members of igem teams in Nanjing University to share their fruit with us.</br></br>
 +
</div>
</div>
<div class="footer">
<div class="footer">
-
  <a href="http://www.seu.edu.cn" target="_blank"><strong>Southeast University</strong></a>
+
  <a href="https://2012.igem.org/Main_Page/" target="_blank">iGEM 2012</a>
-
  <a href="http://bme.seu.edu.cn/" target="_blank">Biomedical Engineer School,SEU</a>
+
  <a href="/wiki/index.php?title=Team:SEU_A/Humanpractice&amp;action=edit">Edit</a>
-
  <a href="https://2012.igem.org/" target="_blank"> iGEM 2012</a>
+
  <a href="#top" onclick="window.scrollTo(0,0);return false;">Top</a>
-
  <a href="https://2012.igem.org/Team:SEU_A/" target="_blank">Designed By SEU_A</a>
+
</div>
</div>
 +
 +
</br></br></br>
 +
<p align="center"><a href="http://www.seu.edu.cn" target="_blank"><strong>Southeast University</strong></a></p>
 +
<p align="center"><a href="http://bme.seu.edu.cn/" target="_blank">Biomedical Engineer School, SEU </a> | <a href="https://2012.igem.org/" target="_blank"> iGEM 2012</a></p>
 +
<p align="center">Copyright &copy; Southeast University iGEM 2012 Team A, All rights reserved.</p>
</body>
</body>
</html>
</html>

Latest revision as of 19:11, 26 September 2012

iGEM 2012 SEU_A Human Practice


Activities

Enjoy a world of Synthetic Biology




Overview

Synthetic biology is a new area of biological research and technology that combines science and engineering. It encompasses a variety of different approaches, methodologies, and disciplines with a variety of definitions. The common goal is the design and construction of new biological functions and systems not found in nature.
   Actually, people often fail to adopt new ideas timely and tend to dodge the revolutions of new ideas. The hesitation results from lack of relevant knowledge and thus lack of control of unknown areas. We are committed to spread relevant knowledge, communicate with people and motivate innovation.

Summary

Through six months’ concerted effort, finally we have got some result and we are satisfied with it. On September 20th, we were honored to invite the members of igem teams in Nanjing University to share their fruit with us.

iGEM 2012 Edit Top



Southeast University

Biomedical Engineer School, SEU | iGEM 2012

Copyright © Southeast University iGEM 2012 Team A, All rights reserved.

Retrieved from "http://2012.igem.org/Team:SEU_A/Humanpractice"