Difference between revisions of "Team:Amoy/Member/Amoy"
ShannonLee (Talk | contribs) |
ShannonLee (Talk | contribs) |
||
Line 7: | Line 7: | ||
<script type="text/javascript" src="https://igem.org/common/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://igem.org/common/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script> | ||
− | < | + | <script type="text/javascript" src="https://2015.igem.org/Template:Amoy/Javascript/BootstrapJs?action=raw&ctype=text/javascript"></script> |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/ | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/BootstrapColCss?action=raw&ctype=text/css" /> |
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/MenuBarCss?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/MenuBarCss?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/GalleryStyleCss?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/AmoySlideBoxCss?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Amoy/css/InterlabCss?action=raw&ctype=text/css" /> | ||
</head> | </head> | ||
Line 86: | Line 92: | ||
− | <div class="col-md-1"></div> | + | <div class="col-md-1" style="-webkit-box-sizing: border-box; box-sizing: border-box;"></div> |
− | <div id="main_content" class="col-md-10"> | + | <div id="main_content" class="col-md-10" style="-webkit-box-sizing: border-box; box-sizing: border-box;"> |
− | <div id="s_menu" class="col-md-2" style="z-index: 999;"> | + | <div id="s_menu" class="col-md-2" style="z-index: 999; -webkit-box-sizing: border-box; box-sizing: border-box;"> |
<a href="https://2015.igem.org/Team:Amoy/Member"><h4>Team</h4></a> | <a href="https://2015.igem.org/Team:Amoy/Member"><h4>Team</h4></a> | ||
<ul class="ul_menu"> | <ul class="ul_menu"> | ||
Line 100: | Line 106: | ||
</div> | </div> | ||
− | <div class="col-md-1"></div> | + | <div class="col-md-1" style="-webkit-box-sizing: border-box; box-sizing: border-box;"></div> |
− | <div id="title" class="col-md-9"> | + | <div id="title" class="col-md-9" style="-webkit-box-sizing: border-box; box-sizing: border-box;"> |
− | < | + | <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 100%;"> |
+ | <!-- Indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="1"></li> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="2"></li> | ||
+ | </ol> | ||
− | < | + | <!-- Wrapper for slides --> |
+ | <div class="carousel-inner" role="listbox"> | ||
+ | <div class="item active"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/f/fc/Amoy-Gallery_Slider_bg1.jpg"> | ||
+ | <div class="carousel-caption"> | ||
+ | Amoy | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/f/fc/Amoy-Gallery_Slider_bg1.jpg"> | ||
+ | <div class="carousel-caption"> | ||
+ | Amoy | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/f/fc/Amoy-Gallery_Slider_bg1.jpg"> | ||
+ | <div class="carousel-caption"> | ||
+ | Amoy | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <!-- Controls --> |
+ | <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> | ||
+ | <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | ||
+ | <span class="sr-only">Previous</span> | ||
+ | </a> | ||
+ | <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | ||
+ | <span class="sr-only">Next</span> | ||
+ | </a> | ||
+ | </div> | ||
− | <p | + | <p id="title_p" style="margin-top: 30px; margin-bottom: 20px;">UNIVERSITY DESCRIPTION</p> |
− | < | + | <p class="main_p">Xiamen University , located in Xiamen, Fujian province.Established by Mr. Tan Kah Kee in 1921, Xiamen University is the first university in China founded by overseas . The school motto is "Pursue Excellence, Strive for Perfection . The university is one of many comprehensive universities directly administered by the Chinese Ministry of Education. In 1995 it was included in the list of the 211 Project for the state key construction; in 2000 it became one of China's higher-level universities designated for the state key construction of the 985 Project.</br></br> |
+ | According to University Undergraduates Teaching Assessment and Chinese Universities Evaluation Standings, the university is ranked 11th in China and has maintained the top 20 ranking in China, among which 6 subjects reach A++ level, including economics and management,fine art, law, chemistry, journalism, communication and mathematics.In addition,the school of management is accredited by EQUIS and AMBA.</br> | ||
+ | </p> | ||
− | |||
− | <p class=" | + | <div class="iw_wrapper"> |
+ | <p style="font-size: 40px; text-align: center; color: #147abc;">GALLERY</p> | ||
+ | <ul class="iw_thumbs" id="iw_thumbs" style="margin-left: 40px;"> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2015/c/c9/Thumbs1.jpg" data-img="https://static.igem.org/mediawiki/2015/5/5e/Full1.jpg" alt="Thumb1"/><div><h2>Serenity</h2><p>Far far away, behind the word mountains there live the blind texts.</p></div></li> | ||
− | < | + | </ul> |
+ | </div> | ||
+ | <div id="iw_ribbon" class="iw_ribbon"> | ||
+ | <span class="iw_close"></span> | ||
+ | <span class="iw_zoom">Click thumb to zoom</span> | ||
+ | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | </ | + | |
+ | <script type="text/javascript" src="https://igem.org/common/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Template:Amoy/Javascript/GalleryJs?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Template:Amoy/Javascript/GalleryMasonryJs?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Template:Amoy/Javascript/GalleryEasingJs?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 | ||
+ | $iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed); | ||
+ | }, | ||
+ | showFullImage = function($el) { | ||
+ | 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> | ||
Revision as of 11:27, 4 September 2015
UNIVERSITY DESCRIPTION
Xiamen University , located in Xiamen, Fujian province.Established by Mr. Tan Kah Kee in 1921, Xiamen University is the first university in China founded by overseas . The school motto is "Pursue Excellence, Strive for Perfection . The university is one of many comprehensive universities directly administered by the Chinese Ministry of Education. In 1995 it was included in the list of the 211 Project for the state key construction; in 2000 it became one of China's higher-level universities designated for the state key construction of the 985 Project. According to University Undergraduates Teaching Assessment and Chinese Universities Evaluation Standings, the university is ranked 11th in China and has maintained the top 20 ranking in China, among which 6 subjects reach A++ level, including economics and management,fine art, law, chemistry, journalism, communication and mathematics.In addition,the school of management is accredited by EQUIS and AMBA.
GALLERY
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
Serenity
Far far away, behind the word mountains there live the blind texts.
CONTACT US
Email: igemxmu@gmail.com
Website: 2015.igem.org/Team:Amoy
Address: Xiamen University, No. 422, Siming South Road, Xiamen, Fujian, P.R.China 361005