|
|
| (18 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| | + | {{:Team:Amsterdam/Header}} |
| | <html> | | <html> |
| - | <div id="pxs_container" class="pxs_container">
| |
| - | <div class="pxs_bg">
| |
| - | <div class="pxs_bg1"></div>
| |
| - | <div class="pxs_bg2"></div>
| |
| - | <div class="pxs_bg3"></div>
| |
| - | </div>
| |
| - | <div class="pxs_loading">Loading images...</div>
| |
| - | <div class="pxs_slider_wrapper">
| |
| - | <ul class="pxs_slider">
| |
| - | <li><img src="https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg" alt="First Image" /></li>
| |
| - | <li><img src="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" alt="Second Image" /></li>
| |
| - | </ul>
| |
| - | <div class="pxs_navigation">
| |
| - | <span class="pxs_next"></span>
| |
| - | <span class="pxs_prev"></span>
| |
| - | </div>
| |
| - | <ul class="pxs_thumbnails">
| |
| - | <li><img src="https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg" height="100px" alt="First Image" /></li>
| |
| - | <li><img src="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" height="100px" alt="Second Image" /></li>
| |
| - | ...
| |
| - | </ul>
| |
| - | </div>
| |
| - | </div>
| |
| | <style type="text/css"> | | <style type="text/css"> |
| - | .pxs_container{
| |
| - | width:100%;
| |
| - | height:420px;
| |
| - | position:relative;
| |
| - | border-top:7px solid #333;
| |
| - | border-bottom:7px solid #333;
| |
| - | overflow:hidden;
| |
| - | -moz-box-shadow:0px 0px 7px #000;
| |
| - | -webkit-box-shadow:0px 0px 7px #000;
| |
| - | box-shadow:0px 0px 7px #000;
| |
| - | }
| |
| - | .pxs_bg{
| |
| - | background:transparent url(../images/bg.png) repeat top left;
| |
| - | }
| |
| - | .pxs_bg div{
| |
| - | position:absolute;
| |
| - | top:0px;
| |
| - | left:0px;
| |
| - | height:420px;
| |
| - | background-repeat:repeat;
| |
| - | background-position:top left;
| |
| - | background-color:transparent;
| |
| - | }
| |
| - | .pxs_bg .pxs_bg1{
| |
| - | background-image:url(../images/bg1.png);
| |
| - | }
| |
| - | .pxs_bg .pxs_bg2{
| |
| - | background-image:url(../images/bg2.png);
| |
| - | }
| |
| - | .pxs_bg .pxs_bg3{
| |
| - | background-image:url(../images/bg3.png);
| |
| - | }
| |
| - | .pxs_slider_wrapper{
| |
| - | display:none;
| |
| - | }
| |
| - | .pxs_container ul{
| |
| - | margin:0px;
| |
| - | padding:0px;
| |
| - | list-style:none;
| |
| - | }
| |
| - | ul.pxs_slider{
| |
| - | position:absolute;
| |
| - | left:0px;
| |
| - | top:0px;
| |
| - | height:420px;
| |
| - | }
| |
| - | ul.pxs_slider li{
| |
| - | height:420px;
| |
| - | float:left;
| |
| - | position:relative;
| |
| - | }
| |
| - | ul.pxs_slider li img{
| |
| - | display:block;
| |
| - | margin:35px auto 0px auto;
| |
| - | -moz-box-shadow:0px 0px 7px #222;
| |
| - | -webkit-box-shadow:0px 0px 7px #222;
| |
| - | box-shadow:0px 0px 7px #222;
| |
| - | border: 8px solid transparent;
| |
| - | -moz-border-radius:4px;
| |
| - | -webkit-border-radius:4px;
| |
| - | border-radius:4px;
| |
| - | }
| |
| - | ul.pxs_thumbnails{
| |
| - | height:35px;
| |
| - | position:absolute;
| |
| - | top:320px;
| |
| - | left:50%;
| |
| - | }
| |
| - | ul.pxs_thumbnails li{
| |
| - | position:absolute;
| |
| - | display:block;
| |
| - | }
| |
| - | ul.pxs_thumbnails li img{
| |
| - | border: 5px solid #FFFFFF;
| |
| - | -moz-box-shadow:1px 1px 7px #555;
| |
| - | -webkit-box-shadow:1px 1px 7px #555;
| |
| - | box-shadow:1px 1px 7px #555;
| |
| - | cursor:pointer;
| |
| - | display:block;
| |
| - | opacity:0.7;
| |
| - | }
| |
| - | ul.pxs_thumbnails li.selected img{
| |
| - | opacity:1.0;
| |
| - | }
| |
| - | .pxs_navigation span{
| |
| - | position:absolute;
| |
| - | width:30px;
| |
| - | height:60px;
| |
| - | -moz-box-shadow:0px 0px 2px #000;
| |
| - | -webkit-box-shadow:0px 0px 2px #000;
| |
| - | box-shadow:0px 0px 2px #000;
| |
| - | top:145px;
| |
| - | opacity:0.6;
| |
| - | -moz-border-radius:4px;
| |
| - | -webkit-border-radius:4px;
| |
| - | border-radius:4px;
| |
| - | cursor:pointer;
| |
| - | }
| |
| - | .pxs_navigation span:hover{
| |
| - | opacity:0.9;
| |
| - | }
| |
| - | .pxs_navigation span.pxs_prev{
| |
| - | background:#000 url(../images/prev.png) no-repeat center center;
| |
| - | }
| |
| - | .pxs_navigation span.pxs_next{
| |
| - | background:#000 url(../images/next.png) no-repeat center center;
| |
| - | }
| |
| - | .pxs_loading{
| |
| - | color:#fff;
| |
| - | font-size:20px;
| |
| - | padding:15px 15px 15px 50px;
| |
| - | position:absolute;
| |
| - | background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
| |
| - | -moz-border-radius:15px;
| |
| - | -webkit-border-radius:15px;
| |
| - | border-radius:15px;
| |
| - | opacity:0.7;
| |
| - | width:180px;
| |
| - | position:absolute;
| |
| - | top:150px;
| |
| - | left:50%;
| |
| - | margin-left:-90px;
| |
| - | }
| |
| - | </style>
| |
| - | <script type = "text/javascript">
| |
| - | $(function() {
| |
| - | var $pxs_container = $('#pxs_container');
| |
| - | $pxs_container.parallaxSlider();
| |
| - | });
| |
| - | (function($) {
| |
| - | $.fn.parallaxSlider = function(options) {
| |
| - | var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
| |
| - | return this.each(function() {
| |
| - | var $pxs_container = $(this),
| |
| - | o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
| |
| | | | |
| - | //the main slider
| |
| - | var $pxs_slider = $('.pxs_slider',$pxs_container),
| |
| - | //the elements in the slider
| |
| - | $elems = $pxs_slider.children(),
| |
| - | //total number of elements
| |
| - | total_elems = $elems.length,
| |
| - | //the navigation buttons
| |
| - | $pxs_next = $('.pxs_next',$pxs_container),
| |
| - | $pxs_prev = $('.pxs_prev',$pxs_container),
| |
| - | //the bg images
| |
| - | $pxs_bg1 = $('.pxs_bg1',$pxs_container),
| |
| - | $pxs_bg2 = $('.pxs_bg2',$pxs_container),
| |
| - | $pxs_bg3 = $('.pxs_bg3',$pxs_container),
| |
| - | //current image
| |
| - | current = 0,
| |
| - | //the thumbs container
| |
| - | $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
| |
| - | //the thumbs
| |
| - | $thumbs = $pxs_thumbnails.children(),
| |
| - | //the interval for the autoplay mode
| |
| - | slideshow,
| |
| - | //the loading image
| |
| - | $pxs_loading = $('.pxs_loading',$pxs_container),
| |
| - | $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
| |
| | | | |
| - | //first, preload all the images
| + | </style> |
| - | var loaded = 0,
| + | <div id="requirements"> |
| - | $images = $pxs_slider_wrapper.find('img');
| + | <table id="table"> |
| | + | <tr> |
| | + | <td>Bronze</td> |
| | + | <td>Silver</td> |
| | + | <td>Gold</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td><a href="https://igem.org/Team.cgi?id=538"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Team registration</a></td> |
| | + | <td><a href="https://2011.igem.org/Team:Amsterdam/Labwork/Characterisation"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Working BioBricks</a></td> |
| | + | <td><a href="https://2011.igem.org/Team:Amsterdam/Human_Outreach/Collaboration"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Collaboration</a></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td><a href="https://igem.org/2011_Judging_Form?id=538"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Complete judging form</a></td> |
| | + | <td><a href="https://2011.igem.org/Team:Amsterdam/Labwork/Characterisation"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">BioBrick characterisation</a></td> |
| | + | <td><a href="https://2011.igem.org/Team:Amsterdam/Human_Outreach/Overview"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Human outreach</a></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Team Wiki</td> |
| | + | <td></td> |
| | + | <td></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">Present at iGEM Jamboree</td> |
| | + | <td></td> |
| | + | <td></td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td><a href="https://2011.igem.org/Team:Amsterdam/Biobricks/Overview#Registry_Submissions"><img src="https://static.igem.org/mediawiki/2011/b/b1/Igemcheck.jpg">New BioBricks submitted</td> |
| | + | <td></td> |
| | + | <td></td> |
| | + | </tr> |
| | + | </tr> |
| | + | </table> |
| | | | |
| - | $images.each(function(){
| + | </div> |
| - | var $img = $(this);
| + | |
| - | $('<img/>').load(function(){
| + | |
| - | ++loaded;
| + | |
| - | if(loaded == total_elems*2){
| + | |
| - | $pxs_loading.hide();
| + | |
| - | $pxs_slider_wrapper.show();
| + | |
| - | | + | |
| - | //width of an image
| + | |
| - | //(assuming all images have the same sizes)
| + | |
| - | var one_image_w = $pxs_slider.find('img:first').width();
| + | |
| - | | + | |
| - | /*
| + | |
| - | set the width of the slider,
| + | |
| - | of each one of its elements, and of the
| + | |
| - | navigation buttons
| + | |
| - | */
| + | |
| - | setWidths($pxs_slider,
| + | |
| - | $elems,
| + | |
| - | total_elems,
| + | |
| - | $pxs_bg1,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg3,
| + | |
| - | one_image_w,
| + | |
| - | $pxs_next,
| + | |
| - | $pxs_prev);
| + | |
| - | | + | |
| - | /*
| + | |
| - | set the widths of the thumbs
| + | |
| - | and spread them evenly
| + | |
| - | */
| + | |
| - | $pxs_thumbnails.css({
| + | |
| - | 'width' : one_image_w + 'px',
| + | |
| - | 'margin-left' : -one_image_w/2 + 'px'
| + | |
| - | });
| + | |
| - | var spaces = one_image_w/(total_elems+1);
| + | |
| - | $thumbs.each(function(i){
| + | |
| - | var $this = $(this);
| + | |
| - | var left = spaces*(i+1) - $this.width()/2;
| + | |
| - | $this.css('left',left+'px');
| + | |
| - | | + | |
| - | if(o.thumbRotation){
| + | |
| - | var angle = Math.floor(Math.random()*41)-20;
| + | |
| - | $this.css({
| + | |
| - | '-moz-transform' : 'rotate('+ angle +'deg)',
| + | |
| - | '-webkit-transform' : 'rotate('+ angle +'deg)',
| + | |
| - | 'transform' : 'rotate('+ angle +'deg)'
| + | |
| - | });
| + | |
| - | }
| + | |
| - | //hovering the thumbs animates them up and down
| + | |
| - | $this.bind('mouseenter',function(){
| + | |
| - | $(this).stop().animate({top:'-10px'},100);
| + | |
| - | }).bind('mouseleave',function(){
| + | |
| - | $(this).stop().animate({top:'0px'},100);
| + | |
| - | });
| + | |
| - | });
| + | |
| - | | + | |
| - | //make the first thumb to be selected
| + | |
| - | highlight($thumbs.eq(0));
| + | |
| - | | + | |
| - | //slide, when clicking the navigation buttons
| + | |
| - | $pxs_next.bind('click',function(){
| + | |
| - | ++current;
| + | |
| - | if(current >= total_elems)
| + | |
| - | if(o.circular)
| + | |
| - | current = 0;
| + | |
| - | else{
| + | |
| - | --current;
| + | |
| - | return false;
| + | |
| - | }
| + | |
| - | highlight($thumbs.eq(current));
| + | |
| - | slide(current,
| + | |
| - | $pxs_slider,
| + | |
| - | $pxs_bg3,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg1,
| + | |
| - | o.speed,
| + | |
| - | o.easing,
| + | |
| - | o.easingBg);
| + | |
| - | });
| + | |
| - | $pxs_prev.bind('click',function(){
| + | |
| - | --current;
| + | |
| - | if(current < 0)
| + | |
| - | if(o.circular)
| + | |
| - | current = total_elems - 1;
| + | |
| - | else{
| + | |
| - | ++current;
| + | |
| - | return false;
| + | |
| - | }
| + | |
| - | highlight($thumbs.eq(current));
| + | |
| - | slide(current,
| + | |
| - | $pxs_slider,
| + | |
| - | $pxs_bg3,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg1,
| + | |
| - | o.speed,
| + | |
| - | o.easing,
| + | |
| - | o.easingBg);
| + | |
| - | });
| + | |
| - | | + | |
| - | /*
| + | |
| - | clicking a thumb will slide to the respective image
| + | |
| - | */
| + | |
| - | $thumbs.bind('click',function(){
| + | |
| - | var $thumb = $(this);
| + | |
| - | highlight($thumb);
| + | |
| - | //if autoplay interrupt when user clicks
| + | |
| - | if(o.auto)
| + | |
| - | clearInterval(slideshow);
| + | |
| - | current = $thumb.index();
| + | |
| - | slide(current,
| + | |
| - | $pxs_slider,
| + | |
| - | $pxs_bg3,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg1,
| + | |
| - | o.speed,
| + | |
| - | o.easing,
| + | |
| - | o.easingBg);
| + | |
| - | });
| + | |
| - | | + | |
| - | /*
| + | |
| - | activate the autoplay mode if
| + | |
| - | that option was specified
| + | |
| - | */
| + | |
| - | if(o.auto != 0){
| + | |
| - | o.circular = true;
| + | |
| - | slideshow = setInterval(function(){
| + | |
| - | $pxs_next.trigger('click');
| + | |
| - | },o.auto);
| + | |
| - | }
| + | |
| - | | + | |
| - | /*
| + | |
| - | when resizing the window,
| + | |
| - | we need to recalculate the widths of the
| + | |
| - | slider elements, based on the new window width;
| + | |
| - | we need to slide again to the current one,
| + | |
| - | since the left of the slider is no longer correct
| + | |
| - | */
| + | |
| - | $(window).resize(function(){
| + | |
| - | w_w = $(window).width();
| + | |
| - | setWidths(
| + | |
| - | $pxs_slider,
| + | |
| - | $elems,
| + | |
| - | total_elems,
| + | |
| - | $pxs_bg1,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg3,
| + | |
| - | one_image_w,
| + | |
| - | $pxs_next,
| + | |
| - | $pxs_prev
| + | |
| - | );
| + | |
| - | slide(
| + | |
| - | current,
| + | |
| - | $pxs_slider,
| + | |
| - | $pxs_bg3,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg1,
| + | |
| - | 1,
| + | |
| - | o.easing,
| + | |
| - | o.easingBg
| + | |
| - | );
| + | |
| - | });
| + | |
| - | | + | |
| - | }
| + | |
| - | }).error(function(){
| + | |
| - | alert('here')
| + | |
| - | }).attr('src',$img.attr('src'));
| + | |
| - | });
| + | |
| - | });
| + | |
| - | };
| + | |
| - | | + | |
| - | //the current window width
| + | |
| - | var w_w = $(window).width();
| + | |
| - | | + | |
| - | var slide = function(current,
| + | |
| - | $pxs_slider,
| + | |
| - | $pxs_bg3,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg1,
| + | |
| - | speed,
| + | |
| - | easing,
| + | |
| - | easingBg){
| + | |
| - | var slide_to = parseInt(-w_w * current);
| + | |
| - | $pxs_slider.stop().animate({
| + | |
| - | left : slide_to + 'px'
| + | |
| - | },speed, easing);
| + | |
| - | $pxs_bg3.stop().animate({
| + | |
| - | left : slide_to/2 + 'px'
| + | |
| - | },speed, easingBg);
| + | |
| - | $pxs_bg2.stop().animate({
| + | |
| - | left : slide_to/4 + 'px'
| + | |
| - | },speed, easingBg);
| + | |
| - | $pxs_bg1.stop().animate({
| + | |
| - | left : slide_to/8 + 'px'
| + | |
| - | },speed, easingBg);
| + | |
| - | }
| + | |
| - | | + | |
| - | var highlight = function($elem){
| + | |
| - | $elem.siblings().removeClass('selected');
| + | |
| - | $elem.addClass('selected');
| + | |
| - | }
| + | |
| - | | + | |
| - | var setWidths = function($pxs_slider,
| + | |
| - | $elems,
| + | |
| - | total_elems,
| + | |
| - | $pxs_bg1,
| + | |
| - | $pxs_bg2,
| + | |
| - | $pxs_bg3,
| + | |
| - | one_image_w,
| + | |
| - | $pxs_next,
| + | |
| - | $pxs_prev){
| + | |
| - | /*
| + | |
| - | the width of the slider is the window width
| + | |
| - | times the total number of elements in the slider
| + | |
| - | */
| + | |
| - | var pxs_slider_w = w_w * total_elems;
| + | |
| - | $pxs_slider.width(pxs_slider_w + 'px');
| + | |
| - | //each element will have a width = windows width
| + | |
| - | $elems.width(w_w + 'px');
| + | |
| - | /*
| + | |
| - | we also set the width of each bg image div.
| + | |
| - | The value is the same calculated for the pxs_slider
| + | |
| - | */
| + | |
| - | $pxs_bg1.width(pxs_slider_w + 'px');
| + | |
| - | $pxs_bg2.width(pxs_slider_w + 'px');
| + | |
| - | $pxs_bg3.width(pxs_slider_w + 'px');
| + | |
| - | | + | |
| - | /*
| + | |
| - | both, the right and left of the
| + | |
| - | navigation next and previous buttons will be:
| + | |
| - | windowWidth/2 - imgWidth/2 + some margin
| + | |
| - | (not to touch the image borders)
| + | |
| - | */
| + | |
| - | var position_nav = w_w/2 - one_image_w/2 + 3;
| + | |
| - | $pxs_next.css('right', position_nav + 'px');
| + | |
| - | $pxs_prev.css('left', position_nav + 'px');
| + | |
| - | }
| + | |
| - | | + | |
| - | $.fn.parallaxSlider.defaults = {
| + | |
| - | auto : 0,
| + | |
| - | speed : 1000,
| + | |
| - | easing : 'jswing',
| + | |
| - | easingBg : 'jswing',
| + | |
| - | circular : true,
| + | |
| - | thumbRotation : true
| + | |
| - | };
| + | |
| - | //easeInOutExpo,easeInBack
| + | |
| - | })(jQuery);
| + | |
| - | </script>
| + | |
| | </html> | | </html> |
"
Team registration
