|
|
(14 intermediate revisions not shown) |
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>
| |
| | | |
| | | |
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 306: |
Line 68: |
| ul.flatflipbuttons{ | | ul.flatflipbuttons{ |
| margin-left:500px; | | margin-left:500px; |
| + | margin-top: 1200px; |
| padding:0; | | padding:0; |
| list-style:none; | | list-style:none; |
Line 458: |
Line 221: |
| font-size:13px; /* Establishes the global font size */ | | font-size:13px; /* Establishes the global font size */ |
| letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */ | | letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */ |
| + | |
| + | position: absolute; |
| + | top: 1px; |
| + | right: 10px; |
| + | |
| } | | } |
| | | |
| #menu-wrap .orbit{ | | #menu-wrap .orbit{ |
| height: 210px; | | height: 210px; |
- | margin: 35px; /* Pushes the images in the display to the center */ | + | margin: 30px; /* Pushes the images in the display to the center */ position: absolute; |
- | position: absolute;
| + | |
| width: 210px; | | width: 210px; |
| } | | } |
Line 469: |
Line 237: |
| #menu-wrap .orbit-frame{ | | #menu-wrap .orbit-frame{ |
| border:2px solid #999; /* Creates a division between the image and wrap5 */ | | border:2px solid #999; /* Creates a division between the image and wrap5 */ |
| + | |
| } | | } |
| | | |
Line 878: |
Line 647: |
| | | |
| </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> |
| | | |
| | | |
Line 897: |
Line 676: |
| <![endif]--> | | <![endif]--> |
| | | |
| + | <style> |
| + | img { |
| + | position: absolute; |
| + | left: 0px; |
| + | top: 0px; |
| + | |
| + | |
| + | } |
| + | |
| + | </style> |
| | | |
| | | |
Line 903: |
Line 692: |
| | | |
| <body> | | <body> |
| + | |
| + | |
| + | <img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" > |
| + | |
| <div id="menu-wrap"> | | <div id="menu-wrap"> |
| <div class="wrap1"> | | <div class="wrap1"> |
Line 982: |
Line 775: |
| | | |
| | | |
- | <table style="width:1300px">
| |
- | <tr>
| |
- | <td>
| |
- |
| |
- | <td>
| |
- |
| |
- | <a href="https://igem.org/Main_Page">
| |
- |
| |
- | <img
| |
- |
| |
- | src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"
| |
- |
| |
- | width="55px"></a>
| |
- |
| |
- |
| |
- |
| |
- | </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>
| |
| | | |
| | | |