Team:OUC-China/Safety

From 2012.igem.org

(Difference between revisions)
Line 15: Line 15:
         width:100%;
         width:100%;
}
}
 +
<body>
 +
<div class="index_header_wrp">
 +
    <div class="index_header">
 +
        <a href="" class="login_logo"></a>
 +
    </div>
 +
</div>
 +
<div class="index_bg">
 +
<ul id="nav">
 +
<li><a href="">Home</a></li>
 +
<li><a href="">Team</a></li>
 +
<li><a href="">Project</a></li>
 +
<li><a href="">Modeling</a></li>
 +
<li><a href="">Notebook</a></li>
 +
<li><a href="">Safety</a></li>
 +
</ul>
 +
<div class="wrapper">
 +
                <div id="ei-slider" class="ei-slider">
 +
                    <ul class="ei-slider-large">
 +
<li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="Kang Li"/>
 +
                            <div class="ei-title">
 +
                                <h2>Captain </h2>
 +
                                <h3>Kang Li</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image01" />
 +
                            <div class="ei-title">
 +
                                <h2>Creative</h2>
 +
                                <h3>Geek</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image02" />
 +
                            <div class="ei-title">
 +
                                <h2>Friendly</h2>
 +
                                <h3>Devil</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image03"/>
 +
                            <div class="ei-title">
 +
                                <h2>Tranquilent</h2>
 +
                                <h3>Compatriot</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image04"/>
 +
                            <div class="ei-title">
 +
                                <h2>Insecure</h2>
 +
                                <h3>Hussler</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image05"/>
 +
                            <div class="ei-title">
 +
                                <h2>Loving</h2>
 +
                                <h3>Rebel</h3>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="image07"/>
 +
                            <div class="ei-title">
 +
                                <h2>Photography by</h2>
 +
                                <h3>Peng Yong</a></h3>
 +
                            </div>
 +
                        </li>
 +
                    </ul><!-- ei-slider-large -->
 +
                    <ul class="ei-slider-thumbs">
 +
                        <li class="ei-slider-element">Current</li>
 +
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
 +
                        <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
 +
                        <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
 +
                        <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
 +
                        <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
 +
                        <li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
 +
                        <li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
 +
                    </ul><!-- ei-slider-thumbs -->
 +
                </div><!-- ei-slider -->
 +
            </div><!-- wrapper -->
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 +
<script>
 +
    (function( window, $, undefined ) {
 +
 +
/*
 +
* smartresize: debounced resize event for jQuery
 +
*
 +
* latest version and complete README available on Github:
 +
* https://github.com/louisremi/jquery.smartresize.js
 +
*
 +
* Copyright 2011 @louis_remi
 +
* Licensed under the MIT license.
 +
*/
 +
 +
var $event = $.event, resizeTimeout;
 +
 +
$event.special.smartresize = {
 +
setup: function() {
 +
$(this).bind( "resize", $event.special.smartresize.handler );
 +
},
 +
teardown: function() {
 +
$(this).unbind( "resize", $event.special.smartresize.handler );
 +
},
 +
handler: function( event, execAsap ) {
 +
// Save the context
 +
var context = this,
 +
args = arguments;
 +
 +
// set correct event type
 +
event.type = "smartresize";
 +
 +
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
 +
resizeTimeout = setTimeout(function() {
 +
jQuery.event.handle.apply( context, args );
 +
}, execAsap === "execAsap"? 0 : 100 );
 +
}
 +
};
 +
 +
$.fn.smartresize = function( fn ) {
 +
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
 +
};
 +
 +
$.Slideshow = function( options, element ) {
 +
 +
this.$el = $( element );
 +
 +
/***** images ****/
 +
 +
// list of image items
 +
this.$list = this.$el.find('ul.ei-slider-large');
 +
// image items
 +
this.$imgItems = this.$list.children('li');
 +
// total number of items
 +
this.itemsCount = this.$imgItems.length;
 +
// images
 +
this.$images = this.$imgItems.find('img:first');
 +
 +
/***** thumbs ****/
 +
 +
// thumbs wrapper
 +
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
 +
// slider elements
 +
this.$sliderElems = this.$sliderthumbs.children('li');
 +
// sliding div
 +
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
 +
// thumbs
 +
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
 +
 +
// initialize slideshow
 +
this._init( options );
 +
 +
};
 +
 +
$.Slideshow.defaults = {
 +
// animation types:
 +
// "sides" : new slides will slide in from left / right
 +
// "center": new slides will appear in the center
 +
animation : 'sides', // sides || center
 +
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
 +
autoplay : false,
 +
// interval for the slideshow
 +
slideshow_interval : 3000,
 +
// speed for the sliding animation
 +
speed : 800,
 +
// easing for the sliding animation
 +
easing : '',
 +
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
 +
titlesFactor : 0.60,
 +
// titles animation speed
 +
titlespeed : 800,
 +
// titles animation easing
 +
titleeasing : '',
 +
// maximum width for the thumbs in pixels
 +
thumbMaxWidth : 150
 +
    };
 +
 +
$.Slideshow.prototype = {
 +
_init : function( options ) {
 +
 +
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
 +
 +
// set the opacity of the title elements and the image items
 +
this.$imgItems.css( 'opacity', 0 );
 +
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
 +
 +
// index of current visible slider
 +
this.current = 0;
 +
 +
var _self = this;
 +
 +
// preload images
 +
// add loading status
 +
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
 +
 +
$.when( this._preloadImages() ).done( function() {
 +
 +
// hide loading status
 +
_self.$loading.hide();
 +
 +
// calculate size and position for each image
 +
_self._setImagesSize();
 +
 +
// configure thumbs container
 +
_self._initThumbs();
 +
 +
// show first
 +
_self.$imgItems.eq( _self.current ).css({
 +
'opacity' : 1,
 +
'z-index' : 10
 +
}).show().find('div.ei-title > *').css( 'opacity', 1 );
 +
 +
// if autoplay is true
 +
if( _self.options.autoplay ) {
 +
 +
_self._startSlideshow();
 +
 +
}
 +
 +
// initialize the events
 +
_self._initEvents();
 +
 +
});
 +
 +
},
 +
_preloadImages : function() {
 +
 +
// preloads all the large images
 +
 +
var _self = this,
 +
loaded = 0;
 +
 +
return $.Deferred(
 +
 +
function(dfd) {
 +
 +
_self.$images.each( function( i ) {
 +
 +
$('<img/>').load( function() {
 +
 +
if( ++loaded === _self.itemsCount ) {
 +
 +
dfd.resolve();
 +
 +
}
 +
 +
}).attr( 'src', $(this).attr('src') );
 +
 +
});
 +
 +
}
 +
 +
).promise();
 +
 +
},
 +
_setImagesSize : function() {
 +
 +
// save ei-slider's width
 +
this.elWidth = this.$el.width();
 +
 +
var _self = this;
 +
 +
this.$images.each( function( i ) {
 +
 +
var $img = $(this);
 +
imgDim = _self._getImageDim( $img.attr('src') );
 +
 +
$img.css({
 +
width : imgDim.width,
 +
height : imgDim.height,
 +
marginLeft : imgDim.left,
 +
marginTop : imgDim.top
 +
});
 +
 +
});
 +
 +
},
 +
_getImageDim : function( src ) {
 +
 +
var $img    = new Image();
 +
 +
$img.src    = src;
 +
 +
var c_w = this.elWidth,
 +
c_h = this.$el.height(),
 +
r_w = c_h / c_w,
 +
 +
i_w = $img.width,
 +
i_h = $img.height,
 +
r_i = i_h / i_w,
 +
new_w, new_h, new_left, new_top;
 +
 +
if( r_w > r_i ) {
 +
 +
new_h = c_h;
 +
new_w = c_h / r_i;
 +
 +
}
 +
else {
 +
 +
new_h = c_w * r_i;
 +
new_w = c_w;
 +
 +
}
 +
 +
return {
 +
width : new_w,
 +
height : new_h,
 +
left : ( c_w - new_w ) / 2,
 +
top : ( c_h - new_h ) / 2
 +
};
 +
 +
},
 +
_initThumbs : function() {
 +
 +
// set the max-width of the slider elements to the one set in the plugin's options
 +
// also, the width of each slider element will be 100% / total number of elements
 +
this.$sliderElems.css({
 +
'max-width' : this.options.thumbMaxWidth + 'px',
 +
'width' : 100 / this.itemsCount + '%'
 +
});
 +
 +
// set the max-width of the slider and show it
 +
this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
 +
 +
},
 +
_startSlideshow : function() {
 +
 +
var _self = this;
 +
 +
this.slideshow = setTimeout( function() {
 +
 +
var pos;
 +
 +
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
 +
 +
_self._slideTo( pos );
 +
 +
if( _self.options.autoplay ) {
 +
 +
_self._startSlideshow();
 +
 +
}
 +
 +
}, this.options.slideshow_interval);
 +
 +
},
 +
// shows the clicked thumb's slide
 +
_slideTo : function( pos ) {
 +
 +
// return if clicking the same element or if currently animating
 +
if( pos === this.current || this.isAnimating )
 +
return false;
 +
 +
this.isAnimating = true;
 +
 +
var $currentSlide = this.$imgItems.eq( this.current ),
 +
$nextSlide = this.$imgItems.eq( pos ),
 +
_self = this,
 +
 +
preCSS = {zIndex : 10},
 +
animCSS = {opacity : 1};
 +
 +
// new slide will slide in from left or right side
 +
if( this.options.animation === 'sides' ) {
 +
 +
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
 +
animCSS.left = 0;
 +
 +
}
 +
 +
// titles animation
 +
$nextSlide.find('div.ei-title > h2')
 +
  .css( 'margin-right', 50 + 'px' )
 +
  .stop()
 +
  .delay( this.options.speed * this.options.titlesFactor )
 +
  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
 +
  .end()
 +
  .find('div.ei-title > h3')
 +
  .css( 'margin-right', -50 + 'px' )
 +
  .stop()
 +
  .delay( this.options.speed * this.options.titlesFactor )
 +
  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
 +
 +
$.when(
 +
 +
// fade out current titles
 +
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
 +
// reset style
 +
$(this).show().css( 'opacity', 0 );
 +
}),
 +
 +
// animate next slide in
 +
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
 +
 +
// "sliding div" moves to new position
 +
this.$sliderElem.stop().animate({
 +
left : this.$thumbs.eq( pos ).position().left
 +
}, this.options.speed )
 +
 +
).done( function() {
 +
 +
// reset values
 +
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
 +
_self.current = pos;
 +
_self.isAnimating = false;
 +
 +
});
 +
 +
},
 +
_initEvents : function() {
 +
 +
var _self = this;
 +
 +
// window resize
 +
$(window).on( 'smartresize.eislideshow', function( event ) {
 +
 +
// resize the images
 +
_self._setImagesSize();
 +
 +
// reset position of thumbs sliding div
 +
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
 +
 +
});
 +
 +
// click the thumbs
 +
this.$thumbs.on( 'click.eislideshow', function( event ) {
 +
 +
if( _self.options.autoplay ) {
 +
 +
clearTimeout( _self.slideshow );
 +
_self.options.autoplay = false;
 +
 +
}
 +
 +
var $thumb = $(this),
 +
idx = $thumb.index() - 1; // exclude sliding div
 +
 +
_self._slideTo( idx );
 +
 +
return false;
 +
 +
});
 +
 +
}
 +
};
 +
 +
var logError = function( message ) {
 +
 +
if ( this.console ) {
 +
 +
console.error( message );
 +
 +
}
 +
 +
};
 +
 +
$.fn.eislideshow = function( options ) {
 +
 +
if ( typeof options === 'string' ) {
 +
 +
var args = Array.prototype.slice.call( arguments, 1 );
 +
 +
this.each(function() {
 +
 +
var instance = $.data( this, 'eislideshow' );
 +
 +
if ( !instance ) {
 +
logError( "cannot call methods on eislideshow prior to initialization; " +
 +
"attempted to call method '" + options + "'" );
 +
return;
 +
}
 +
 +
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
 +
logError( "no such method '" + options + "' for eislideshow instance" );
 +
return;
 +
}
 +
 +
instance[ options ].apply( instance, args );
 +
 +
});
 +
 +
}
 +
else {
 +
 +
this.each(function() {
 +
 +
var instance = $.data( this, 'eislideshow' );
 +
if ( !instance ) {
 +
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
 +
}
 +
 +
});
 +
 +
}
 +
 +
return this;
 +
 +
};
 +
 +
})( window, jQuery );
 +
</script>
 +
<script>
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
 +
 +
jQuery.extend( jQuery.easing,
 +
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
</script>
 +
<script type="text/javascript">
 +
            $(function() {
 +
                $('#ei-slider').eislideshow({
 +
animation : 'center',
 +
autoplay : true,
 +
slideshow_interval : 3000,
 +
titlesFactor : 0
 +
                });
 +
            });
 +
        </script>
 +
</body>
 +
</html>

Revision as of 13:23, 15 July 2012