Template:Http://2014.igem.org/Team:Colombia

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
 +
<script>
 +
 +
/**
 +
* Slimslider v1.1.0
 +
* @author Kyle Foster
 +
* MIT license
 +
*/
 +
;(function ( $, window, document, undefined ) {
 +
 +
  $.fn.slimSlider = function ( options ) {
 +
 +
    options = $.extend( {}, $.fn.slimSlider.options, options );
 +
 +
    return this.each(function () {       
 +
     
 +
      // Define our variables
 +
      var counter  = 0,
 +
          element  = $(this),
 +
          wrapper  = element.children('.slides'),
 +
          slide    = wrapper.children('li'),
 +
          slideCnt = slide.length,
 +
          navLink  = element.find('.slide-nav').find('li').find('a'),
 +
          prefix  = (/mozilla/.test(navigator.userAgent.toLowerCase()) &&
 +
                    !/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' :
 +
                    (/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :
 +
                    (/msie/.test(navigator.userAgent.toLowerCase()))  ? '-ms-' :
 +
                    (/opera/.test(navigator.userAgent.toLowerCase()))  ? '-o-' : '';
 +
     
 +
      // Add active class to first nav link
 +
      navLink.first().addClass('active');   
 +
     
 +
      // Auto play function (if selected options)
 +
      if ( options.autoPlay === true ) {         
 +
       
 +
        // Define slideshow variable
 +
        var slideShow;
 +
 +
        // Define play function
 +
        function play() {
 +
 +
          // Don't execute after click function 
 +
          if ( !wrapper.is('.stopped') ) {
 +
 +
            // Slideshow function
 +
            slideShow = setTimeout(function() {
 +
             
 +
              // Slideshow iterator
 +
              if (counter < slideCnt - 1) { counter++; }
 +
              else { counter = 0; }; 
 +
 +
              // Stop browser 'catch up' when switching tabs
 +
              wrapper.stop(true,true);
 +
 +
              // Fire animation function
 +
              animate();
 +
 +
              // Loop our slideshow
 +
              play();
 +
            }, options.autoDelay );
 +
          };
 +
        };
 +
 +
        // Instantiate our play function
 +
        play();
 +
       
 +
        // Define our pause function
 +
        function pause() { clearTimeout(slideShow); };
 +
       
 +
        // Pause on hover (if selected)
 +
        if ( options.hoverPause === true ) {
 +
          wrapper.on({
 +
            mouseenter: function() { pause(); },
 +
            mouseleave: function() { play(); }
 +
          });
 +
        };
 +
      };
 +
 +
      // Navigation click function
 +
      navLink.on('click', function(e) {
 +
       
 +
        // Stop auto play (if instantiated)
 +
        pause();
 +
 +
        // Add a class to keep animation stopped
 +
        wrapper.addClass('stopped');
 +
       
 +
        // Set counter to new slide position
 +
        counter = $(this).parent().index();
 +
       
 +
        // Fire animation function
 +
        animate();
 +
       
 +
        // Prevent default click action
 +
        e.preventDefault();
 +
      }); 
 +
 +
      // Define our animation function
 +
      function animate() {
 +
     
 +
        // Iterate through our navigation links
 +
        navLink.each(function() {
 +
     
 +
          // Cache 'this'
 +
          var currentLink = $(this);         
 +
     
 +
          // Move to counter's position
 +
          if ( counter === currentLink.parent().index() ) {
 +
            navLink.removeClass('active'); // Clear 'active' class
 +
            currentLink.addClass('active'); // And add to selected link
 +
          }
 +
        });
 +
 +
        // Animation
 +
        wrapper
 +
          .css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition
 +
          .css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate
 +
          .bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
 +
            wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes
 +
          });
 +
      };
 +
 +
      // Define debulked onresize handler
 +
      function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c };
 +
     
 +
      // Instantiate resize function     
 +
      on_resize(function() {
 +
     
 +
        // Cache our slider width
 +
        var newWidth = element.width();       
 +
     
 +
        // Set wrapper width & reposition
 +
        wrapper
 +
          .css({ 'width' : newWidth * slideCnt })
 +
          .css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' );       
 +
     
 +
        // Set slide width
 +
        slide.css({ 'width' : newWidth });
 +
      })();   
 +
    });
 +
  };
 +
 +
  // Overridable default options
 +
  $.fn.slimSlider.options = {
 +
    animSpeed  : '0.5s', // animation speed
 +
    autoPlay  : true,  // auto play option
 +
    autoDelay  : 4000,  // auto play duration
 +
    hoverPause : true    // auto play pause on hover     
 +
  };
 +
 +
})( jQuery, window, document );
 +
 +
// Instantiate Slimslider
 +
$('.slider').slimSlider();
 +
 +
</script>
 +
<!-- this section changes the default wiki template to a white full width background -->
<!-- this section changes the default wiki template to a white full width background -->

Revision as of 15:51, 22 August 2014

' Wheeltz - CSS3 Navigational Wheel Menu

  • Slide One
  • Slide Two
  • Slide Three
  • Slide Four
  • Slide Five
  • Slide Five
  • Home
  • University
  • Facebook
  • Twitter


Retrieved from "http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia"