Team:Toulouse/template/slider

From 2014.igem.org

(Difference between revisions)
Line 4: Line 4:
/* Slider (thanks to flowplayer.org) */
/* Slider (thanks to flowplayer.org) */
/*************************************/
/*************************************/
-
.scrollable {
+
.cbp-fwslider {
-
/* required settinsg */
+
    position: relative;
-
position: relative;
+
    margin: 0 0 10px;
-
overflow :hidden;
+
    overflow: hidden;
-
     margin-top: 14px;
+
    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%;
     width: 100%;
-
    height: 675px;
+
}
-
    background: #FFFFFF;
+
-
    }
+
.cbp-fwdots span {
-
   
+
     display: inline-block;
-
.scrollable .items {
+
    width: 18px;
-
/* this cannot be too large */
+
    height: 18px;
-
width: 50000px;
+
     background: #ddd;
-
position: absolute;
+
    margin: 4px;
-
     }
+
    border-radius: 50%;
-
   
+
    cursor: pointer;
-
.items div {
+
}
-
float: left;
+
-
max-width: 2500px;
+
.cbp-fwdots span:hover {
-
        width:100%;
+
    background: #999;
-
height: 675px;
+
}
-
     }
+
-
   
+
.cbp-fwdots span.cbp-fwcurrent {
-
.prev {
+
    background: #47a3da;
-
        background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
+
    box-shadow: 0 0 0 2px #47a3da;
-
        height: 74px;
+
    transition: box-shadow 0.2s ease-in-out;
-
        width: 74px;
+
}
-
        position: absolute;
+
-
            left: -486px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
+
-
            top: 450px;
+
-
        margin-left: 50%;
+
-
        cursor: pointer;
+
-
        }
+
-
       
+
-
.next {
+
-
        background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
+
-
        height: 74px;
+
-
        width: 74px;
+
-
        margin-right: 50%;
+
-
        position: absolute;
+
-
            right: -488px;  
+
-
            top: 450px;
+
-
        cursor: pointer;
+
-
        }
+
-
       
+
-
.disabled {
+
-
        visibility: hidden;}
+
</style>
</style>
Line 59: Line 102:
     <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
     <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
     <script>
     <script>
-
         $(function() {
+
         ;( function( $, window, undefined ) {
-
    // initialize scrollable
+
-
    $(".scrollable").scrollable().navigator();
+
    '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>
     </script>
<!-------------------------------- SLIDE HEADER --------------------------------->
<!-------------------------------- SLIDE HEADER --------------------------------->
-
            <div class="scrollable">
+
<div id="cbp-fwslider" class="cbp-fwslider">
-
              <div class="items">
+
    <ul>
-
                <div>
+
        <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>
-
                  <a href="https://2014.igem.org/Team:Toulouse/Project/Overviews"><img src="https://static.igem.org/mediawiki/2014/8/89/Toulouse_Home_1.JPG" alt="Title"/></a>
+
        <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>
-
                </div>
+
        <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>
-
                <div>
+
    </ul>
-
                  <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" alt="Introduction"/></a>
+
</div>
-
                </div>
+
-
                <div>
+
-
                    <a href="https://2014.igem.org/Team:Toulouse/Team"><img src="https://static.igem.org/mediawiki/2014/3/36/Toulouse_Home_3.jpg" alt="Team" /></a>
+
-
                </div>
+
-
                <!--<div>
+
-
                    <a href="#"><img src="https://static.igem.org/mediawiki/2014/4/4a/Template-igem2014-slide2.jpg" alt="#"/></a>
+
-
                </div>-->
+
-
 
+
-
              </div>
+
-
            </div>
+
-
            <div class="prev"></div>
+
-
            <div class="next"></div>
+
-
            <div class="navi"></div>
+
-
<div class="clear"></div>
 
    
    
</html>
</html>

Revision as of 11:17, 8 October 2014

  • img03
  • img04

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