Team:Shenzhen BGIC 0101

From 2013.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://2013.igem.org/Team:Shenzhen_BGIC_0101/js/jquerycarouFredSel?action=raw&ctype=text/js" type="text/javascript"></script>
<script src="https://2013.igem.org/Team:Shenzhen_BGIC_0101/js/jquerycarouFredSel?action=raw&ctype=text/js" type="text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
 +
function prevTimers() {
 +
return allTimers().slice( 0, $('#pager a.selected').index() );
 +
}
 +
function allTimers() {
 +
return $('#pager a span');
 +
}
 +
$(function() {
$(function() {
$('#carousel').carouFredSel({
$('#carousel').carouFredSel({
-
width: 800,
+
items: 1,
-
align: false,
+
auto: {
-
items: {
+
pauseOnHover: 'resume',
-
visible: 1,
+
progress: {
-
width: 700
+
bar: '#pager a:first span'
 +
}
},
},
-
auto: false,
 
-
next: '#next',
 
scroll: {
scroll: {
-
onBefore: function( data ) {
+
fx: 'crossfade',
-
data.items.visible.animate({
+
duration: 300,
-
'marginLeft': 0
+
timeoutDuration: 6000,
-
}, data.scroll.duration);
+
onAfter: function() {
-
},
+
allTimers().stop().width( 0 );
-
onAfter: function( data ) {
+
prevTimers().width( 140 );
-
data.items.old.css({
+
$(this).trigger('configuration', [ 'auto.progress.bar', '#pager a.selected span' ]);
-
'zIndex': 0,
+
-
'marginLeft': -100
+
-
});
+
-
data.items.visible.css( 'zIndex', 2 );
+
-
data.items.visible.next().css( 'zIndex', 1 );
+
}
}
},
},
-
onCreate: function( data ) {
+
pagination: {
-
data.items.css({
+
container: '#pager',
-
'marginLeft': 0,
+
anchorBuilder: false
-
'zIndex': 2
+
-
});
+
-
data.items.next().css( 'zIndex', 1 );
+
}
}
});
});
Line 42: Line 39:
</script>
</script>
<style type="text/css">
<style type="text/css">
-
html, body {
 
-
height: 100%;
 
-
padding: 0;
 
-
margin: 0;
 
-
}
 
-
body {
 
-
background-color: #eee;
 
-
min-height: 600px;
 
-
}
 
-
body * {
 
-
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
 
-
font-size: 14px;
 
-
color: #333;
 
-
line-height: 22px;
 
-
}
 
-
#wrapper {
 
-
background-color: #fff;
 
-
width: 610px;
 
-
height: 375px;
 
-
padding: 10px;
 
-
margin: 400px 200px 0 0;
 
-
position: absolute;
 
-
top: 50%;
 
-
left: 50%;
 
-
box-shadow: 0 0 10px #666;
 
-
}
 
#carousel {
#carousel {
-
width: 610px;
+
width: 750px;
-
height: 375px;
+
height: 480px;
-
overflow: hidden;
+
}
}
#carousel img {
#carousel img {
-
border: none;
+
border: 1px solid #ccc;
display: block;
display: block;
-
+
padding: 10px;
-
+
float: left;
-
position: relative;
+
-
z-index: 0;
+
-
+
}
}
-
#uniq {
+
#pager {
-
width: 610px;
+
margin-top: 5px;
-
height: 375px;
+
width: 750px;
-
overflow: hidden;
+
-
border: none;
+
-
display: block;
+
-
margin-left: 0;
+
-
position: relative;
+
-
z-index: 0;
+
}
}
-
#next {
+
#pager a, #pager span {
-
background: url( img/gui-next.png ) center center no-repeat #999;
+
display: block;
display: block;
-
width: 20px;
+
height: 10px;
-
height: 375px;
+
-
position: absolute;
+
-
top: 10px;
+
-
right: 10px;
+
-
z-index: 5;
+
-
opacity: 0.1;
+
-
 
+
-
-o-transition: opacity 1s ease;
+
-
-ms-transition: opacity 1s ease;
+
-
-moz-transition: opacity 1s ease;
+
-
-webkit-transition: opacity 1s ease;
+
-
transition: opacity 1s ease;
+
}
}
-
#next:hover {
+
#pager a {
-
opacity: 0.5;
+
border: 1px solid #ccc;
 +
width: 119px;
 +
margin-right: 3px;
 +
float: left;
 +
}
 +
#pager a:hover {
 +
border-color: #999;
 +
}
 +
#pager span {
 +
background-color: #ccc;
 +
width: 0px;
}
}
Line 119: Line 77:
#donate {
#donate {
border-top: 1px solid #999;
border-top: 1px solid #999;
-
width: 750px;
+
width: 800px;
padding: 50px 75px;
padding: 50px 75px;
margin: 0 auto;
margin: 0 auto;
Line 129: Line 87:
}
}
#donate p {
#donate p {
-
width: 650px;
+
width: 730px;
}
}
#donate form {
#donate form {
Line 137: Line 95:
</head>
</head>
<body>
<body>
 +
<h1 style="text-align:center;">This is our story!</h1>
 +
<div id="wrapper">
<div id="wrapper">
<div id="carousel">
<div id="carousel">
-
<img src="https://static.igem.org/mediawiki/2013/5/50/Frontpage1.png" width="570" height="371"/ >
+
<img src="https://static.igem.org/mediawiki/2013/5/50/Frontpage1.png" width="720" height="477"/ >
-
<img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width="560" height="371" />
+
<img src="https://static.igem.org/mediawiki/2013/9/91/Frontpage2.png" width="720" height="477" />
-
<img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width="560" height="371" />
+
<img src="https://static.igem.org/mediawiki/2013/3/3d/Frontpage3.png" width="720" height="477" />
-
<img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width="560" height="371" />
+
<img src="https://static.igem.org/mediawiki/2013/f/f7/Frontpage4.png" width="720" height="477" />
-
<img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width="560" height="371" />
+
<img src="https://static.igem.org/mediawiki/2013/5/53/Frontpage5.png" width="720" height="477" />
-
<img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width="560" height="371" />
+
<img src="https://static.igem.org/mediawiki/2013/f/f6/Frontpage6.png" width="720" height="477" class="last" />
 +
</div>
 +
<div id="pager">
 +
<a href="#"><span></span></a>
 +
<a href="#"><span></span></a>
 +
<a href="#"><span></span></a>
 +
<a href="#"><span></span></a>
 +
<a href="#"><span></span></a>
 +
<a href="#"><span></span></a>
</div>
</div>
-
 
-
<div>
 
-
<a id="next" href="#"></a>
 
</div>
</div>
 +
<div style="text-align:center;clear:both">
 +
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 19:10, 28 October 2013




This is our story!

Retrieved from "http://2013.igem.org/Team:Shenzhen_BGIC_0101"