Team:SEU A/Humanpractice

From 2012.igem.org

(Difference between revisions)
Line 26: Line 26:
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.masonry.min.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.masonry.min.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/attributions/jquery.easing.1.3.js?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
+
<script type="text/javascript" src="https://2012.igem.org/Team:SEU_A/photowallclick.js?action=raw&ctype=text/javascript"></script>
-
$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>

Revision as of 07:20, 25 September 2012

iGEM 2012 SEU_A Human Practice

Human Practice

Activities

Enjoy a world of Synthetic Biology
  • Thumb1

    Team

    We are iGEMers, and we are trying to show you a magical world consisting by Bio Break.

Click thumb to zoom
iGEM 2012 Edit Top

Retrieved from "http://2012.igem.org/Team:SEU_A/Humanpractice"