Team:Shenzhen BGIC 0101

From 2013.igem.org

(Difference between revisions)
 
(32 intermediate revisions not shown)
Line 5: Line 5:
<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 );
+
}
}
});
});
});
});
</script>
</script>
 +
<style type="text/css">
 +
 +
#carousel {
 +
width: 750px;
 +
height: 480px;
 +
}
 +
#carousel img {
 +
border: 1px solid #ccc;
 +
display: block;
 +
padding: 10px;
 +
float: left;
 +
}
 +
#pager {
 +
margin-top: 5px;
 +
width: 750px;
 +
}
 +
#pager a, #pager span {
 +
display: block;
 +
height: 10px;
 +
}
 +
#pager a {
 +
border: 1px solid #ccc;
 +
width: 119px;
 +
margin-right: 3px;
 +
float: left;
 +
}
 +
#pager a:hover {
 +
border-color: #999;
 +
}
 +
#pager span {
 +
background-color: #ccc;
 +
width: 0px;
 +
}
 +
 +
#donate-spacer {
 +
height: 100%;
 +
}
 +
#donate {
 +
border-top: 1px solid #999;
 +
width: 800px;
 +
padding: 50px 75px;
 +
margin: 0 auto;
 +
overflow: hidden;
 +
}
 +
#donate p, #donate form {
 +
margin: 0;
 +
float: left;
 +
}
 +
#donate p {
 +
width: 730px;
 +
}
 +
#donate form {
 +
width: 100px;
 +
}
 +
</style>
</head>
</head>
-
<body>
+
<body>
-
        <hr style="color:#BDCBBD; height:3px;" />
+
<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>
</div>
-
<hr style="color:#225323;"/>
+
<div style="text-align:center;clear:both">
-
</body>
+
 
 +
</div>
 +
</body>
</html>
</html>

Latest revision as of 19:10, 28 October 2013






This is our story!