|
|
| Line 6: |
Line 6: |
| | | | |
| | | | |
| - | <style>
| |
| - |
| |
| - | .cbp-fwslider {
| |
| - | position: relative;
| |
| - | margin: 0 0 10px;
| |
| - | overflow: hidden;
| |
| - | padding: 40px 0 60px;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider ul {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | white-space: nowrap;
| |
| - | list-style-type: none;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider ul li {
| |
| - | transform: translateZ(0);
| |
| - | float: left;
| |
| - | display: block;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider ul li > a,
| |
| - | .cbp-fwslider ul li > div {
| |
| - | display: block;
| |
| - | text-align: center;
| |
| - | outline: none;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider ul li > a img {
| |
| - | border: none;
| |
| - | display: block;
| |
| - | margin: 0 auto;
| |
| - | max-width: 75%;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider nav span {
| |
| - | position: absolute;
| |
| - | top: 50%;
| |
| - | width: 50px;
| |
| - | height: 100px;
| |
| - | background: #47a3da;
| |
| - | color: #fff;
| |
| - | font-size: 50px;
| |
| - | text-align: center;
| |
| - | margin-top: -50px;
| |
| - | line-height: 100px;
| |
| - | cursor: pointer;
| |
| - | font-weight: normal;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider nav span:hover {
| |
| - | background: #378fc3;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider nav span.cbp-fwnext {
| |
| - | right: 0px;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwslider nav span.cbp-fwprev {
| |
| - | left: 0px;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwdots {
| |
| - | position: absolute;
| |
| - | bottom: 0px;
| |
| - | white-space: nowrap;
| |
| - | text-align: center;
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwdots span {
| |
| - | display: inline-block;
| |
| - | width: 18px;
| |
| - | height: 18px;
| |
| - | background: #ddd;
| |
| - | margin: 4px;
| |
| - | border-radius: 50%;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwdots span:hover {
| |
| - | background: #999;
| |
| - | }
| |
| - |
| |
| - | .cbp-fwdots span.cbp-fwcurrent {
| |
| - | background: #47a3da;
| |
| - | box-shadow: 0 0 0 2px #47a3da;
| |
| - | transition: box-shadow 0.2s ease-in-out;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - |
| |
| - | <script>
| |
| - |
| |
| - | ;( function( $, window, undefined ) {
| |
| - |
| |
| - | 'use strict';
| |
| - |
| |
| - | // global
| |
| - | var Modernizr = window.Modernizr;
| |
| - |
| |
| - | $.CBPFWSlider = function( options, element ) {
| |
| - | this.$el = $( element );
| |
| - | this._init( options );
| |
| - | };
| |
| - |
| |
| - | // the options
| |
| - | $.CBPFWSlider.defaults = {
| |
| - | // default transition speed (ms)
| |
| - | speed : 500,
| |
| - | // default transition easing
| |
| - | easing : 'ease'
| |
| - | };
| |
| - |
| |
| - | $.CBPFWSlider.prototype = {
| |
| - | _init : function( options ) {
| |
| - | // options
| |
| - | this.options = $.extend( true, {}, $.CBPFWSlider.defaults, options );
| |
| - | // cache some elements and initialize some variables
| |
| - | this._config();
| |
| - | // initialize/bind the events
| |
| - | this._initEvents();
| |
| - | },
| |
| - | _config : function() {
| |
| - |
| |
| - | // the list of items
| |
| - | this.$list = this.$el.children( 'ul' );
| |
| - | // the items (li elements)
| |
| - | this.$items = this.$list.children( 'li' );
| |
| - | // total number of items
| |
| - | this.itemsCount = this.$items.length;
| |
| - | // support for CSS Transitions & transforms
| |
| - | this.support = Modernizr.csstransitions && Modernizr.csstransforms;
| |
| - | this.support3d = Modernizr.csstransforms3d;
| |
| - | // transition end event name and transform name
| |
| - | var transProperties = {
| |
| - | 'WebkitTransition' : { transitionEndEvent : 'webkitTransitionEnd', tranformName : '-webkit-transform' },
| |
| - | 'MozTransition' : { transitionEndEvent : 'transitionend', tranformName : '-moz-transform' },
| |
| - | 'OTransition' : { transitionEndEvent : 'oTransitionEnd', tranformName : '-o-transform' },
| |
| - | 'msTransition' : { transitionEndEvent : 'MSTransitionEnd', tranformName : '-ms-transform' },
| |
| - | 'transition' : { transitionEndEvent : 'transitionend', tranformName : 'transform' }
| |
| - | };
| |
| - | if( this.support ) {
| |
| - | this.transEndEventName = transProperties[ Modernizr.prefixed( 'transition' ) ].transitionEndEvent + '.cbpFWSlider';
| |
| - | this.transformName = transProperties[ Modernizr.prefixed( 'transition' ) ].tranformName;
| |
| - | }
| |
| - | // current and old item´s index
| |
| - | this.current = 0;
| |
| - | this.old = 0;
| |
| - | // check if the list is currently moving
| |
| - | this.isAnimating = false;
| |
| - | // the list (ul) will have a width of 100% x itemsCount
| |
| - | this.$list.css( 'width', 100 * this.itemsCount + '%' );
| |
| - | // apply the transition
| |
| - | if( this.support ) {
| |
| - | this.$list.css( 'transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing );
| |
| - | }
| |
| - | // each item will have a width of 100 / itemsCount
| |
| - | this.$items.css( 'width', 100 / this.itemsCount + '%' );
| |
| - | // add navigation arrows and the navigation dots if there is more than 1 item
| |
| - | if( this.itemsCount > 1 ) {
| |
| - |
| |
| - | // add navigation arrows (the previous arrow is not shown initially):
| |
| - | this.$navPrev = $( '<span class="cbp-fwprev"><</span>' ).hide();
| |
| - | this.$navNext = $( '<span class="cbp-fwnext">></span>' );
| |
| - | $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el );
| |
| - | // add navigation dots
| |
| - | var dots = '';
| |
| - | for( var i = 0; i < this.itemsCount; ++i ) {
| |
| - | // current dot will have the class cbp-fwcurrent
| |
| - | var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
| |
| - | dots += dot;
| |
| - | }
| |
| - | var navDots = $( '<div class="cbp-fwdots"/>' ).append( dots ).appendTo( this.$el );
| |
| - | this.$navDots = navDots.children( 'span' );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _initEvents : function() {
| |
| - |
| |
| - | var self = this;
| |
| - | if( this.itemsCount > 1 ) {
| |
| - | this.$navPrev.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'previous' ) );
| |
| - | this.$navNext.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'next' ) );
| |
| - | this.$navDots.on( 'click.cbpFWSlider', function() { self._jump( $( this ).index() ); } );
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _navigate : function( direction ) {
| |
| - |
| |
| - | // do nothing if the list is currently moving
| |
| - | if( this.isAnimating ) {
| |
| - | return false;
| |
| - | }
| |
| - |
| |
| - | this.isAnimating = true;
| |
| - | // update old and current values
| |
| - | this.old = this.current;
| |
| - | if( direction === 'next' && this.current < this.itemsCount - 1 ) {
| |
| - | ++this.current;
| |
| - | }
| |
| - | else if( direction === 'previous' && this.current > 0 ) {
| |
| - | --this.current;
| |
| - | }
| |
| - | // slide
| |
| - | this._slide();
| |
| - |
| |
| - | },
| |
| - | _slide : function() {
| |
| - |
| |
| - | // check which navigation arrows should be shown
| |
| - | this._toggleNavControls();
| |
| - | // translate value
| |
| - | var translateVal = -1 * this.current * 100 / this.itemsCount;
| |
| - | if( this.support ) {
| |
| - | this.$list.css( 'transform', this.support3d ? 'translate3d(' + translateVal + '%,0,0)' : 'translate(' + translateVal + '%)' );
| |
| - | }
| |
| - | else {
| |
| - | this.$list.css( 'margin-left', -1 * this.current * 100 + '%' );
| |
| - | }
| |
| - |
| |
| - | var transitionendfn = $.proxy( function() {
| |
| - | this.isAnimating = false;
| |
| - | }, this );
| |
| - |
| |
| - | if( this.support ) {
| |
| - | this.$list.on( this.transEndEventName, $.proxy( transitionendfn, this ) );
| |
| - | }
| |
| - | else {
| |
| - | transitionendfn.call();
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _toggleNavControls : function() {
| |
| - |
| |
| - | // if the current item is the first one in the list, the left arrow is not shown
| |
| - | // if the current item is the last one in the list, the right arrow is not shown
| |
| - | switch( this.current ) {
| |
| - | case 0 : this.$navNext.show(); this.$navPrev.hide(); break;
| |
| - | case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break;
| |
| - | default : this.$navNext.show(); this.$navPrev.show(); break;
| |
| - | }
| |
| - | // highlight navigation dot
| |
| - | this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' );
| |
| - |
| |
| - | },
| |
| - | _jump : function( position ) {
| |
| - |
| |
| - | // do nothing if clicking on the current dot, or if the list is currently moving
| |
| - | if( position === this.current || this.isAnimating ) {
| |
| - | return false;
| |
| - | }
| |
| - | this.isAnimating = true;
| |
| - | // update old and current values
| |
| - | this.old = this.current;
| |
| - | this.current = position;
| |
| - | // slide
| |
| - | this._slide();
| |
| - |
| |
| - | },
| |
| - | destroy : function() {
| |
| - |
| |
| - | if( this.itemsCount > 1 ) {
| |
| - | this.$navPrev.parent().remove();
| |
| - | this.$navDots.parent().remove();
| |
| - | }
| |
| - | this.$list.css( 'width', 'auto' );
| |
| - | if( this.support ) {
| |
| - | this.$list.css( 'transition', 'none' );
| |
| - | }
| |
| - | this.$items.css( 'width', 'auto' );
| |
| - |
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | var logError = function( message ) {
| |
| - | if ( window.console ) {
| |
| - | window.console.error( message );
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | $.fn.cbpFWSlider = function( options ) {
| |
| - | if ( typeof options === 'string' ) {
| |
| - | var args = Array.prototype.slice.call( arguments, 1 );
| |
| - | this.each(function() {
| |
| - | var instance = $.data( this, 'cbpFWSlider' );
| |
| - | if ( !instance ) {
| |
| - | logError( "cannot call methods on cbpFWSlider prior to initialization; " +
| |
| - | "attempted to call method '" + options + "'" );
| |
| - | return;
| |
| - | }
| |
| - | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
| |
| - | logError( "no such method '" + options + "' for cbpFWSlider instance" );
| |
| - | return;
| |
| - | }
| |
| - | instance[ options ].apply( instance, args );
| |
| - | });
| |
| - | }
| |
| - | else {
| |
| - | this.each(function() {
| |
| - | var instance = $.data( this, 'cbpFWSlider' );
| |
| - | if ( instance ) {
| |
| - | instance._init();
| |
| - | }
| |
| - | else {
| |
| - | instance = $.data( this, 'cbpFWSlider', new $.CBPFWSlider( options, this ) );
| |
| - | }
| |
| - | });
| |
| - | }
| |
| - | return this;
| |
| - | };
| |
| - |
| |
| - | } )( jQuery, window );
| |
| - |
| |
| - | </script>
| |
| | | | |
| | <br><br> | | <br><br> |
| Line 355: |
Line 36: |
| | <!-- BANNER --> | | <!-- BANNER --> |
| | | | |
| - | <div id="cbp-fwslider" class="cbp-fwslider">
| |
| - | <ul>
| |
| - | <li><a href="#"><img src="https://static.igem.org/mediawiki/2014/d/d9/Demo_educationfacet.jpg" alt="img01"/></a></li>
| |
| - | <li><a href="#"><img src="https://static.igem.org/mediawiki/2014/d/d9/Demo_educationfacet.jpg" alt="img01"/></a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| | | | |
| - | <!--<div id="banner" style="width:auto;overflow:hidden;"> | + | |
| | + | <div id="banner" style="width:auto;overflow:hidden;"> |
| | <img src="https://static.igem.org/mediawiki/2014/d/d9/Demo_educationfacet.jpg" style="width:100%;" /> | | <img src="https://static.igem.org/mediawiki/2014/d/d9/Demo_educationfacet.jpg" style="width:100%;" /> |
| - | </div>--> | + | </div> |
| | | | |
| | | | |
"
