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

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
 
-
<script type="text/javascript">
 
-
 
-
/**
 
-
* 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>
 
Line 209: Line 53:
   Background:#C68E17;
   Background:#C68E17;
   }
   }
-
 
-
</style>
 
-
 
-
<style>
 
-
 
-
/* Webfont link */
 
-
@import url(http://fonts.googleapis.com/css?family=Unica+One);
 
-
 
-
/* Plugin base styles */
 
-
 
-
.slider {
 
-
  position: relative;
 
-
  width: 100%;
 
-
  overflow: hidden;
 
-
}
 
-
 
-
.slides {
 
-
  position: relative;
 
-
  padding: 0;
 
-
  list-style: none;
 
-
  letter-spacing: 0;
 
-
  word-spacing: 0;
 
-
  font-size: 0;
 
-
  -webkit-backface-visibility: hidden;
 
-
  -webkit-transform: translate3d(0,0,0);
 
-
}
 
-
 
-
.slides li {
 
-
  display: inline-block;
 
-
  -webkit-backface-visibility: hidden;
 
-
}
 
-
 
-
.slides li img {
 
-
  width: 100%;
 
-
  height: auto;
 
-
}
 
-
 
-
/* Non-plugin styles */
 
-
 
-
* {
 
-
  margin: 0;
 
-
  padding: 0;
 
-
}
 
-
 
-
body {
 
-
  position: relative;
 
-
  width: 90%;
 
-
  max-width: 600px;
 
-
  margin: 0 auto;
 
-
  font-family: 'Unica One', sans-serif;
 
-
}
 
-
 
-
.slide-nav {
 
-
  position: absolute;
 
-
  bottom: 20px;
 
-
  right: 20px;
 
-
  z-index: 1;
 
-
}
 
-
 
-
.slide-nav ul {
 
-
  letter-spacing: 0;
 
-
  word-spacing: 0;
 
-
  font-size: 0;
 
-
}
 
-
 
-
.slide-nav li { display: inline-block; }
 
-
 
-
.slide-nav li a {
 
-
  display: block;
 
-
  color: #444;
 
-
  background: #FFF;
 
-
  text-decoration: none;
 
-
  border-radius: 50%;
 
-
  width: 26px;
 
-
  height: 26px;
 
-
  line-height: 26px;
 
-
  font-size: 12px;
 
-
  text-align: center;
 
-
  margin: 0 0 0 6px;
 
-
}
 
-
 
-
.slide-nav li a.active { color: #DEBB1E; }
 
</style>
</style>
Line 878: Line 640:
</style>
</style>
 +
 +
script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function() {
 +
        $('#slider').s3Slider({
 +
            timeOut: 5000
 +
        });
 +
    });
 +
</script>
 +
 +
<style type="text/css" media="screen">
 +
#slider {
 +
    width: 970px; /* important to be same as image width */
 +
    height: 244px; /* important to be same as image height */
 +
    position: relative; /* important */
 +
overflow: hidden; /* important */
 +
margin-left: -2px;
 +
}
 +
#sliderContent {
 +
    width: 970px; /* important to be same as image width or wider */
 +
    position: absolute;
 +
top: 0;
 +
margin-left: 0;
 +
}
 +
.sliderImage {
 +
    float: left;
 +
    position: relative;
 +
display: none;
 +
}
 +
.sliderImage span {
 +
    position: absolute;
 +
font: 10px/15px Arial, Helvetica, sans-serif;
 +
    width: 384px;
 +
 +
display: none;
 +
   
 +
}
 +
.clear {
 +
clear: both;
 +
}
 +
.sliderImage span strong {
 +
    font-size: 14px;
 +
}
 +
.top {
 +
top: 0;
 +
left: 0;
 +
}
 +
.bottom {
 +
bottom: 0;
 +
    left: 0;
 +
}
 +
ul { list-style-type: none;}
 +
</style>
 +
 +
</head>
 +
<body>
 +
 +
<div id="slider">
 +
        <ul id="sliderContent">
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/a/a0/SL1.png" alt="1" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="1" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/e/ef/SL2.png" alt="2" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="2" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/7/72/SL3.png" alt="3" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="3" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/6/6f/SL4.png" alt="4" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="4" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/5/5d/SL5.png" alt="5" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="5" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/3/33/SL6.png" alt="6" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="6" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/c/c6/SL7.png" alt="7" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="7" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/1/1d/SL8.png" alt="8" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="8" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/9/9e/SL9.png" alt="9" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="9" /></span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="https://static.igem.org/mediawiki/2012/6/6f/SL10.png" alt="10" />
 +
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="10" /></span>
 +
            </li>
 +
            <div class="clear sliderImage"></div>
 +
        </ul>
 +
    </div>
 +
 
 +
 +
Line 999: Line 867:
</td>
</td>
-
 
-
 
-
<section class="slider">
 
-
 
-
  <nav class="slide-nav">
 
-
    <ul>
 
-
      <li><a href="#">01</a></li>
 
-
      <li><a href="#">02</a></li>
 
-
      <li><a href="#">03</a></li>
 
-
      <li><a href="#">04</a></li>
 
-
      <li><a href="#">05</a></li>
 
-
      <li><a href="#">06</a></li>
 
-
    </ul>
 
-
  </nav>
 
-
 
 
-
  <ul class="slides">
 
-
    <li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li>   
 
-
    <li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li>
 
-
  </ul>
 
-
 
 
-
</section>
 

Revision as of 15:56, 22 August 2014

script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">

  • 1 1
  • 2 2
  • 3 3
  • 4 4
  • 5 5
  • 6 6
  • 7 7
  • 8 8
  • 9 9
  • 10 10
' Wheeltz - CSS3 Navigational Wheel Menu
  • Home
  • University
  • Facebook
  • Twitter


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