|
|
| (12 intermediate revisions not shown) |
| 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 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>
| |
| | | | |
| | | | |
"
