"
Team:SEU A/Attributions
From 2012.igem.org
| Line 21: | Line 21: | ||
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/jquery.easing.1.3.js"></script> | <script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/jquery.easing.1.3.js"></script> | ||
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/jquery.min.js"></script> | <script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/jquery.min.js"></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> | ||
</head> | </head> | ||
| Line 47: | Line 344: | ||
<br class="clearfloat" /> | <br class="clearfloat" /> | ||
</header> | </header> | ||
| - | |||
| - | |||
| - | |||
| - | |||
</div> | </div> | ||
Revision as of 16:42, 22 September 2012
Activities
Enjoy a world of Synthetic Biology
Serenity
Far far away, behind the word mountains there live the blind texts.
Silence
Separated they live in Bookmarksgrove right at the coast of the Semantics.
Abstraction
Far far away, behind the word mountains there live the blind texts.
Happiness
Far far away, behind the word mountains there live the blind texts.
Greatness
Far far away, behind the word mountains there live the blind texts.
Abstraction
Far far away, behind the word mountains there live the blind texts.
Virtue
Far far away, behind the word mountains there live the blind texts.
Beauty
Far far away, behind the word mountains there live the blind texts.
Happiness
Far far away, behind the word mountains there live the blind texts.
Greatness
Far far away, behind the word mountains there live the blind texts.
Attraction
Far far away, behind the word mountains there live the blind texts.
Growth
A small river named Duden flows by their place and supplies it with the necessary regelialia.
Virtue
Far far away, behind the word mountains there live the blind texts.
Beauty
Far far away, behind the word mountains there live the blind texts.
Abstraction
Far far away, behind the word mountains there live the blind texts.
Attraction
Far far away, behind the word mountains there live the blind texts.
Virtue
Far far away, behind the word mountains there live the blind texts.
Happiness
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.
Virtue
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.
Attraction
Far far away, behind the word mountains there live the blind texts.
Virtue
Far far away, behind the word mountains there live the blind texts.
Happiness
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.
Virtue
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.
Attraction
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.
Silence
Separated they live in Bookmarksgrove right at the coast of the Semantics.
Abstraction
Far far away, behind the word mountains there live the blind texts.
Attraction
Far far away, behind the word mountains there live the blind texts.
Growth
A small river named Duden flows by their place and supplies it with the necessary regelialia.
Virtue
Far far away, behind the word mountains there live the blind texts.
Beauty
Far far away, behind the word mountains there live the blind texts.
Happiness
Far far away, behind the word mountains there live the blind texts.
Greatness
Far far away, behind the word mountains there live the blind texts.
Abstraction
Far far away, behind the word mountains there live the blind texts.
Attraction
Far far away, behind the word mountains there live the blind texts.
Virtue
Far far away, behind the word mountains there live the blind texts.
Happiness
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.
Virtue
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.
Attraction
Far far away, behind the word mountains there live the blind texts.
Biomedical Engineer School, SEU | iGEM 2012
Copyright © Southeast University iGEM 2012 Team A, All rights reserved.
