Difference between revisions of "Team:SZU China/Introductions"

Line 4: Line 4:
 
<head>
 
<head>
 
<link href="https://2015.igem.org/Template:SZU_China/Playground/Introduction/CSS?action=raw&ctype=text/css" rel="stylesheet">
 
<link href="https://2015.igem.org/Template:SZU_China/Playground/Introduction/CSS?action=raw&ctype=text/css" rel="stylesheet">
 +
<style>
 +
#columns {
 +
  column-width: 320px;
 +
  column-gap: 15px;
 +
  width: 90%;
 +
  max-width: 1100px;
 +
  margin: 50px auto;
 +
}   
 +
div#columns figure {
 +
  background: #fefefe;
 +
  border: 2px solid #fcfcfc;
 +
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 +
  margin: 0 2px 15px;
 +
  padding: 15px; padding-bottom: 10px;
 +
  transition: opacity .4s ease-in-out;
 +
  column-break-inside: avoid;
 +
  display: inline-block;
 +
}
 +
div#columns figure img {
 +
  width: 100%; height: auto;
 +
  border-bottom: 1px solid #ccc;
 +
  padding-bottom: 15px;
 +
  margin-bottom: 5px;
 +
}             
 +
div#columns:hover figure:not(:hover) { opacity: 0.4; } 
 +
 +
@media screen and (max-width: 750px) {
 +
  #columns { column-gap: 0px; }
 +
  #columns figure { width: 100%; }
 +
}                           
 +
</style>
 
</head>
 
</head>
 
</html>
 
</html>
 
<html>
 
<html>
 
<body>
 
<body>
−
<div id="grid-gallery" class="grid-gallery">
+
<div id="columns">
−
<section class="grid-wrap">
+
  <figure>
−
<ul class="grid">
+
    <img src="https://static.igem.org/mediawiki/2015/9/9a/SZU_China_LZU1.jpg" alt>
−
<li class="grid-sizer"></li><!-- for Masonry column width -->
+
    <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
−
<li>
+
  </figure>
−
<figure>
+
  <figure>
−
<img src="img/thumb/1.png" alt="img01"/>
+
    <img src="https://static.igem.org/mediawiki/2015/9/9a/SZU_China_LZU1.jpg" alt>
−
<figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
+
    <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
−
</figure>
+
  </figure>
−
</li>
+
</div>        
−
<li>
+
−
<figure>
+
−
<img src="img/thumb/2.png" alt="img02"/>
+
−
<figcaption><h3>Vice velit chia</h3><p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p></figcaption>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<img src="img/thumb/3.png" alt="img03"/>
+
−
<figcaption><h3>Brunch semiotics</h3><p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p></figcaption>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<img src="img/thumb/4.png" alt="img04"/>
+
−
<figcaption><h3>Chillwave nihil occupy</h3><p>In post-ironic gluten-free deserunt, PBR&B non pork belly cupidatat polaroid. </p></figcaption>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<img src="img/thumb/5.png" alt="img05"/>
+
−
<figcaption><h3>Kale chips lomo biodiesel</h3><p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p></figcaption>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<img src="img/thumb/6.png" alt="img06"/>
+
−
<figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</p></figcaption>
+
−
</figure>
+
−
</li>
+
−
</ul>
+
−
</section><!-- // grid-wrap -->
+
−
<section class="slideshow">
+
−
<ul>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Letterpress asymmetrical</h3>
+
−
<p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>
+
−
</figcaption>
+
−
<img src="img/large/1.png" alt="img01"/>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Vice velit chia</h3>
+
−
<p>Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, cred sustainable Odd Future hashtag butcher.</p>
+
−
</figcaption>
+
−
<img src="img/large/2.png" alt="img02"/>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Brunch semiotics</h3>
+
−
<p>IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next level single-origin coffee photo booth.</p>
+
−
</figcaption>
+
−
<img src="img/large/3.png" alt="img03"/>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Chillwave nihil occupy</h3>
+
−
<p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
+
−
</figcaption>
+
−
<img src="img/large/4.png" alt="img04"/>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Kale chips lomo biodiesel</h3>
+
−
<p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p>
+
−
</figcaption>
+
−
<img src="img/large/5.png" alt="img05"/>
+
−
</figure>
+
−
</li>
+
−
<li>
+
−
<figure>
+
−
<figcaption>
+
−
<h3>Exercitation occaecat</h3>
+
−
<p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p>
+
−
</figcaption>
+
−
<img src="img/large/6.png" alt="img06"/>
+
−
</figure>
+
−
</li>
+
−
</ul>
+
−
<nav>
+
−
<span class="icon nav-prev"></span>
+
−
<span class="icon nav-next"></span>
+
−
<span class="icon nav-close"></span>
+
−
</nav>
+
−
<div class="info-keys icon">Navigate with arrow keys</div>
+
−
</section><!-- // slideshow -->
+
−
</div><!-- // grid-gallery -->
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<script src="https://2015.igem.org/Template:SZU_China/bootstrap/Javascript?action=raw&ctype=text/javascript"></script>
+
−
<script>
+
−
;( function( window ) {
+
−
+
−
'use strict';
+
−
 
+
−
var docElem = window.document.documentElement,
+
−
transEndEventNames = {
+
−
'WebkitTransition': 'webkitTransitionEnd',
+
−
'MozTransition': 'transitionend',
+
−
'OTransition': 'oTransitionEnd',
+
−
'msTransition': 'MSTransitionEnd',
+
−
'transition': 'transitionend'
+
−
},
+
−
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+
−
support = {
+
−
transitions : Modernizr.csstransitions,
+
−
support3d : Modernizr.csstransforms3d
+
−
};
+
−
 
+
−
function setTransform( el, transformStr ) {
+
−
el.style.WebkitTransform = transformStr;
+
−
el.style.msTransform = transformStr;
+
−
el.style.transform = transformStr;
+
−
}
+
−
 
+
−
// from http://responsejs.com/labs/dimensions/
+
−
function getViewportW() {
+
−
var client = docElem['clientWidth'],
+
−
inner = window['innerWidth'];
+
−
+
−
if( client < inner )
+
−
return inner;
+
−
else
+
−
return client;
+
−
}
+
−
 
+
−
function extend( a, b ) {
+
−
for( var key in b ) {
+
−
if( b.hasOwnProperty( key ) ) {
+
−
a[key] = b[key];
+
−
}
+
−
}
+
−
return a;
+
−
}
+
−
 
+
−
function CBPGridGallery( el, options ) {
+
−
this.el = el;
+
−
this.options = extend( {}, this.options );
+
−
  extend( this.options, options );
+
−
  this._init();
+
−
}
+
−
 
+
−
CBPGridGallery.prototype.options = {
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._init = function() {
+
−
// main grid
+
−
this.grid = this.el.querySelector( 'section.grid-wrap > ul.grid' );
+
−
// main grid items
+
−
this.gridItems = [].slice.call( this.grid.querySelectorAll( 'li:not(.grid-sizer)' ) );
+
−
// items total
+
−
this.itemsCount = this.gridItems.length;
+
−
// slideshow grid
+
−
this.slideshow = this.el.querySelector( 'section.slideshow > ul' );
+
−
// slideshow grid items
+
−
this.slideshowItems = [].slice.call( this.slideshow.children );
+
−
// index of current slideshow item
+
−
this.current = -1;
+
−
// slideshow control buttons
+
−
this.ctrlPrev = this.el.querySelector( 'section.slideshow > nav > span.nav-prev' );
+
−
this.ctrlNext = this.el.querySelector( 'section.slideshow > nav > span.nav-next' );
+
−
this.ctrlClose = this.el.querySelector( 'section.slideshow > nav > span.nav-close' );
+
−
// init masonry grid
+
−
this._initMasonry();
+
−
// init events
+
−
this._initEvents();
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._initMasonry = function() {
+
−
var grid = this.grid;
+
−
imagesLoaded( grid, function() {
+
−
new Masonry( grid, {
+
−
itemSelector: 'li',
+
−
columnWidth: grid.querySelector( '.grid-sizer' )
+
−
});
+
−
});
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._initEvents = function() {
+
−
var self = this;
+
−
 
+
−
// open the slideshow when clicking on the main grid items
+
−
this.gridItems.forEach( function( item, idx ) {
+
−
item.addEventListener( 'click', function() {
+
−
self._openSlideshow( idx );
+
−
} );
+
−
} );
+
−
 
+
−
// slideshow controls
+
−
this.ctrlPrev.addEventListener( 'click', function() { self._navigate( 'prev' ); } );
+
−
this.ctrlNext.addEventListener( 'click', function() { self._navigate( 'next' ); } );
+
−
this.ctrlClose.addEventListener( 'click', function() { self._closeSlideshow(); } );
+
−
 
+
−
// window resize
+
−
window.addEventListener( 'resize', function() { self._resizeHandler(); } );
+
−
 
+
−
// keyboard navigation events
+
−
document.addEventListener( 'keydown', function( ev ) {
+
−
if ( self.isSlideshowVisible ) {
+
−
var keyCode = ev.keyCode || ev.which;
+
−
 
+
−
switch (keyCode) {
+
−
case 37:
+
−
self._navigate( 'prev' );
+
−
break;
+
−
case 39:
+
−
self._navigate( 'next' );
+
−
break;
+
−
case 27:
+
−
self._closeSlideshow();
+
−
break;
+
−
}
+
−
}
+
−
} );
+
−
 
+
−
// trick to prevent scrolling when slideshow is visible
+
−
window.addEventListener( 'scroll', function() {
+
−
if ( self.isSlideshowVisible ) {
+
−
window.scrollTo( self.scrollPosition ? self.scrollPosition.x : 0, self.scrollPosition ? self.scrollPosition.y : 0 );
+
−
}
+
−
else {
+
−
self.scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
+
−
}
+
−
});
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._openSlideshow = function( pos ) {
+
−
this.isSlideshowVisible = true;
+
−
this.current = pos;
+
−
 
+
−
classie.addClass( this.el, 'slideshow-open' );
+
−
 
+
−
/* position slideshow items */
+
−
 
+
−
// set viewport items (current, next and previous)
+
−
this._setViewportItems();
+
−
+
−
// add class "current" and "show" to currentItem
+
−
classie.addClass( this.currentItem, 'current' );
+
−
classie.addClass( this.currentItem, 'show' );
+
−
 
+
−
// add class show to next and previous items
+
−
// position previous item on the left side and the next item on the right side
+
−
if( this.prevItem ) {
+
−
classie.addClass( this.prevItem, 'show' );
+
−
var translateVal = Number( -1 * ( getViewportW() / 2 + this.prevItem.offsetWidth / 2 ) );
+
−
setTransform( this.prevItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
+
−
}
+
−
if( this.nextItem ) {
+
−
classie.addClass( this.nextItem, 'show' );
+
−
var translateVal = Number( getViewportW() / 2 + this.nextItem.offsetWidth / 2 );
+
−
setTransform( this.nextItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
+
−
}
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._navigate = function( dir ) {
+
−
if( this.isAnimating ) return;
+
−
if( dir === 'next' && this.current === this.itemsCount - 1 ||  dir === 'prev' && this.current === 0  ) {
+
−
this._closeSlideshow();
+
−
return;
+
−
}
+
−
 
+
−
this.isAnimating = true;
+
−
+
−
// reset viewport items
+
−
this._setViewportItems();
+
−
 
+
−
var self = this,
+
−
itemWidth = this.currentItem.offsetWidth,
+
−
// positions for the centered/current item, both the side items and the incoming ones
+
−
transformLeftStr = support.support3d ? 'translate3d(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
+
−
transformRightStr = support.support3d ? 'translate3d(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
+
−
transformCenterStr = '', transformOutStr, transformIncomingStr,
+
−
// incoming item
+
−
incomingItem;
+
−
 
+
−
if( dir === 'next' ) {
+
−
transformOutStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
+
−
transformIncomingStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
+
−
}
+
−
else {
+
−
transformOutStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
+
−
transformIncomingStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
+
−
}
+
−
 
+
−
// remove class animatable from the slideshow grid (if it has already)
+
−
classie.removeClass( self.slideshow, 'animatable' );
+
−
 
+
−
if( dir === 'next' && this.current < this.itemsCount - 2 || dir === 'prev' && this.current > 1 ) {
+
−
// we have an incoming item!
+
−
incomingItem = this.slideshowItems[ dir === 'next' ? this.current + 2 : this.current - 2 ];
+
−
setTransform( incomingItem, transformIncomingStr );
+
−
classie.addClass( incomingItem, 'show' );
+
−
}
+
−
 
+
−
var slide = function() {
+
−
// add class animatable to the slideshow grid
+
−
classie.addClass( self.slideshow, 'animatable' );
+
−
 
+
−
// overlays:
+
−
classie.removeClass( self.currentItem, 'current' );
+
−
var nextCurrent = dir === 'next' ? self.nextItem : self.prevItem;
+
−
classie.addClass( nextCurrent, 'current' );
+
−
 
+
−
setTransform( self.currentItem, dir === 'next' ? transformLeftStr : transformRightStr );
+
−
 
+
−
if( self.nextItem ) {
+
−
setTransform( self.nextItem, dir === 'next' ? transformCenterStr : transformOutStr );
+
−
}
+
−
 
+
−
if( self.prevItem ) {
+
−
setTransform( self.prevItem, dir === 'next' ? transformOutStr : transformCenterStr );
+
−
}
+
−
 
+
−
if( incomingItem ) {
+
−
setTransform( incomingItem, dir === 'next' ? transformRightStr : transformLeftStr );
+
−
}
+
−
 
+
−
var onEndTransitionFn = function( ev ) {
+
−
if( support.transitions ) {
+
−
if( ev.propertyName.indexOf( 'transform' ) === -1 ) return false;
+
−
this.removeEventListener( transEndEventName, onEndTransitionFn );
+
−
}
+
−
 
+
−
if( self.prevItem && dir === 'next' ) {
+
−
classie.removeClass( self.prevItem, 'show' );
+
−
}
+
−
else if( self.nextItem && dir === 'prev' ) {
+
−
classie.removeClass( self.nextItem, 'show' );
+
−
}
+
−
 
+
−
if( dir === 'next' ) {
+
−
self.prevItem = self.currentItem;
+
−
self.currentItem = self.nextItem;
+
−
if( incomingItem ) {
+
−
self.nextItem = incomingItem;
+
−
}
+
−
}
+
−
else {
+
−
self.nextItem = self.currentItem;
+
−
self.currentItem = self.prevItem;
+
−
if( incomingItem ) {
+
−
self.prevItem = incomingItem;
+
−
}
+
−
}
+
−
 
+
−
self.current = dir === 'next' ? self.current + 1 : self.current - 1;
+
−
self.isAnimating = false;
+
−
};
+
−
 
+
−
if( support.transitions ) {
+
−
self.currentItem.addEventListener( transEndEventName, onEndTransitionFn );
+
−
}
+
−
else {
+
−
onEndTransitionFn();
+
−
}
+
−
};
+
−
 
+
−
setTimeout( slide, 25 );
+
−
}
+
−
 
+
−
CBPGridGallery.prototype._closeSlideshow = function( pos ) {
+
−
// remove class slideshow-open from the grid gallery elem
+
−
classie.removeClass( this.el, 'slideshow-open' );
+
−
// remove class animatable from the slideshow grid
+
−
classie.removeClass( this.slideshow, 'animatable' );
+
−
 
+
−
var self = this,
+
−
onEndTransitionFn = function( ev ) {
+
−
if( support.transitions ) {
+
−
if( ev.target.tagName.toLowerCase() !== 'ul' ) return;
+
−
this.removeEventListener( transEndEventName, onEndTransitionFn );
+
−
}
+
−
// remove classes show and current from the slideshow items
+
−
classie.removeClass( self.currentItem, 'current' );
+
−
classie.removeClass( self.currentItem, 'show' );
+
−
+
−
if( self.prevItem ) {
+
−
classie.removeClass( self.prevItem, 'show' );
+
−
}
+
−
if( self.nextItem ) {
+
−
classie.removeClass( self.nextItem, 'show' );
+
−
}
+
−
 
+
−
// also reset any transforms for all the items
+
−
self.slideshowItems.forEach( function( item ) { setTransform( item, '' ); } );
+
−
 
+
−
self.isSlideshowVisible = false;
+
−
};
+
−
 
+
−
if( support.transitions ) {
+
−
this.el.addEventListener( transEndEventName, onEndTransitionFn );
+
−
}
+
−
else {
+
−
onEndTransitionFn();
+
−
}
+
−
};
+
−
 
+
−
CBPGridGallery.prototype._setViewportItems = function() {
+
−
this.currentItem = null;
+
−
this.prevItem = null;
+
−
this.nextItem = null;
+
−
 
+
−
if( this.current > 0 ) {
+
−
this.prevItem = this.slideshowItems[ this.current - 1 ];
+
−
}
+
−
if( this.current < this.itemsCount - 1 ) {
+
−
this.nextItem = this.slideshowItems[ this.current + 1 ];
+
−
}
+
−
this.currentItem = this.slideshowItems[ this.current ];
+
−
}
+
−
 
+
−
// taken from https://github.com/desandro/vanilla-masonry/blob/master/masonry.js by David DeSandro
+
−
// original debounce by John Hann
+
−
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+
−
CBPGridGallery.prototype._resizeHandler = function() {
+
−
var self = this;
+
−
function delayed() {
+
−
self._resize();
+
−
self._resizeTimeout = null;
+
−
}
+
−
if ( this._resizeTimeout ) {
+
−
clearTimeout( this._resizeTimeout );
+
−
}
+
−
this._resizeTimeout = setTimeout( delayed, 50 );
+
−
}
+
−
 
+
−
CBPGridGallery.prototype._resize = function() {
+
−
if ( this.isSlideshowVisible ) {
+
−
// update width value
+
−
if( this.prevItem ) {
+
−
var translateVal = Number( -1 * ( getViewportW() / 2 + this.prevItem.offsetWidth / 2 ) );
+
−
setTransform( this.prevItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
+
−
}
+
−
if( this.nextItem ) {
+
−
var translateVal = Number( getViewportW() / 2 + this.nextItem.offsetWidth / 2 );
+
−
setTransform( this.nextItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
+
−
}
+
−
}
+
−
}
+
−
 
+
−
// add to global namespace
+
−
window.CBPGridGallery = CBPGridGallery;
+
  
−
})( window );
 
−
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:02, 16 September 2015

Cinderella wearing European fashion of the mid-1860’s
Rapunzel, clothed in 1820’s period fashion