Team:Toulouse/template/slider

From 2014.igem.org

(Difference between revisions)
 
(57 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
 +
<!-- 1. Link to jQuery (1.8 or later), -->
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->
 +
 +
<!-- fotorama.css & fotorama.js. -->
 +
<link  href="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
 +
<script src="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.js"></script> <!-- 16 KB -->
<style type="text/css">
<style type="text/css">
-
/* Slider (thanks to flowplayer.org) */
+
 
-
/*************************************/
+
.content-slide a{
-
.cbp-fwslider {
+
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding: 15px 30px 15px; color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 130px; background-color:#82C46C; text-align: center; margin-top: 70px;
-
    position: relative;
+
-
    margin: 0 0 10px;
+
-
    overflow: hidden;
+
-
    padding: 40px 0 60px;
+
}
}
-
+
.content-slide a:hover{
-
.cbp-fwslider ul {
+
background-color:#22780F;
-
    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>
</style>
-
<!--/* JS contenu PROPRE à cette page*/-->
 
-
    <!-- jQuery Tools (slider) -->
+
<!-------------------------------- SLIDE HEADER --------------------------------->
-
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
-
<script type="text/javascript">  
+
<div style="position:relative; class="wrapper-slide">
-
$( function() {
+
  <div class="fotorama" data-width="100%" data-fit="contain" data-nav="false"  data-ratio="3.2" data-height="690px" data-loop="true" style="margin-top:35px;-webkit-filter: grayscale(0.3);">
-
/*
+
    <center><img src="https://static.igem.org/mediawiki/2014/2/24/Hometesttoulouse.jpg" data-fit="cover" style="-webkit-filter:grayscale(0.5); -moz-filter: grayscale(50%); filter: grayscale(50%);" ></center>
-
- how to call the plugin:
+
    <!--<img src="https://static.igem.org/mediawiki/2014/3/39/Banderole.jpg" data-fit="cover" >
-
$( selector ).cbpFWSlider( [options] );
+
    <img src="https://static.igem.org/mediawiki/2014/4/4b/Home_4.JPG" data-fit="cover" >
-
- options:
+
    <img src="https://static.igem.org/mediawiki/2014/c/c1/Banderole_exp.jpg" data-fit="cover" >-->
-
{
+
   
-
// default transition speed (ms)
+
  </div>
-
speed : 500,
+
-
// default transition easing
+
-
easing : 'ease'
+
-
}
+
-
- destroy:
+
-
$( selector ).cbpFWSlider( 'destroy' );
+
-
*/
+
-
$( '#cbp-fwslider' ).cbpFWSlider();
+
  <div style="margin: 0 auto; width:230px;">
-
 
+
     <div style="position:absolute; top:0; text-align:center;" class="content-slide">
-
} );
+
      <h1 style="font-size:54px; color:white; margin-top: 120px; text-shadow: 2px 2px 2px rgba(0,0,0, 0.60);">SubtiTree</h1>
-
</script>
+
      <p style="font-size:30px; color:white; margin-top: 30px; text-shadow: 2px 2px 2px rgba(0,0,0, 0.60);">Save our trees</p>
-
 
+
      <a href="https://2014.igem.org/Team:Toulouse/Project/Overviews">Learn more</a>
-
<script type="text/javascript">
+
  </div>
-
        ;( function( $, window, undefined ) {
+
  </div>
-
+
-
    '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>
+
-
 
+
-
<!-------------------------------- SLIDE HEADER --------------------------------->
+
-
<div id="cbp-fwslider" class="cbp-fwslider">
 
-
    <ul>
 
-
        <li><a href="https://2014.igem.org/Team:Toulouse/Project/Overviews"><img src="https://static.igem.org/mediawiki/2014/8/89/Toulouse_Home_1.JPG"/></a></li>
 
-
        <li><a href="https://2014.igem.org/Team:Toulouse/Result/experimental-results"><img src="https://static.igem.org/mediawiki/2014/9/95/Toulouse_Home_2.JPG"/></a></li>
 
-
        <li><a href="https://2014.igem.org/Team:Toulouse/Team"><img src="https://static.igem.org/mediawiki/2014/3/36/Toulouse_Home_3.jpg" alt="img03"/></a></li>
 
-
        <li><a href="#"><img src="https://static.igem.org/mediawiki/2014/4/4a/Template-igem2014-slide2.jpg" alt="img04"/></a></li>
 
-
    </ul>
 
</div>
</div>
-
 
 
</html>
</html>

Latest revision as of 12:32, 23 February 2015

SubtiTree

Save our trees

Learn more

Retrieved from "http://2014.igem.org/Team:Toulouse/template/slider"