Template:Sifuentes01
From 2014.igem.org
(Difference between revisions)
Line 10: | Line 10: | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | .lean-slider { | ||
+ | position: relative; | ||
+ | *zoom: 1; | ||
+ | } | ||
+ | .lean-slider:before, | ||
+ | .lean-slider:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
+ | .lean-slider:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .lean-slider-slide { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | margin-right: -100%; | ||
+ | display: none; | ||
+ | } | ||
+ | .lean-slider-slide.current { display: block; } | ||
+ | |||
+ | |||
+ | |||
+ | |||
/* Clear the default wiki settings */ | /* Clear the default wiki settings */ | ||
Line 280: | Line 304: | ||
<script ="text/javascript"> | <script ="text/javascript"> | ||
+ | |||
+ | $.fn.leanSlider = function(options) { | ||
+ | |||
+ | // Set up plugin vars | ||
+ | var plugin = this, | ||
+ | settings = {}, | ||
+ | slider = $(this), | ||
+ | slides = slider.children(), | ||
+ | currentSlide = 0, | ||
+ | timer = 0; | ||
+ | |||
+ | var init = function() { | ||
+ | // Set up settings | ||
+ | settings = $.extend({}, $.fn.leanSlider.defaults, options); | ||
+ | |||
+ | // Add inital classes | ||
+ | slider.addClass('lean-slider'); | ||
+ | slides.addClass('lean-slider-slide'); | ||
+ | |||
+ | currentSlide = settings.startSlide; | ||
+ | if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0; | ||
+ | $(slides[currentSlide]).addClass('current'); | ||
+ | |||
+ | // Set up directionNav | ||
+ | if(settings.directionNav && $(settings.directionNav).length){ | ||
+ | var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'), | ||
+ | nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>'); | ||
+ | if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText)); | ||
+ | if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText)); | ||
+ | |||
+ | prevNav.on('click', function(e){ | ||
+ | e.preventDefault(); | ||
+ | plugin.prev(); | ||
+ | }); | ||
+ | nextNav.on('click', function(e){ | ||
+ | e.preventDefault(); | ||
+ | plugin.next(); | ||
+ | }); | ||
+ | |||
+ | $(settings.directionNav).append(prevNav); | ||
+ | $(settings.directionNav).append(nextNav); | ||
+ | } | ||
+ | |||
+ | // Set up controlNav | ||
+ | if(settings.controlNav && $(settings.controlNav).length){ | ||
+ | slides.each(function(i){ | ||
+ | var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>'); | ||
+ | if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i]))); | ||
+ | |||
+ | controlNav.on('click', function(e){ | ||
+ | e.preventDefault(); | ||
+ | plugin.show(i); | ||
+ | }); | ||
+ | |||
+ | $(settings.controlNav).append(controlNav); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // Set up pauseOnHover | ||
+ | if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){ | ||
+ | slider.hover( | ||
+ | function () { | ||
+ | clearTimeout(timer); | ||
+ | }, | ||
+ | function () { | ||
+ | doTimer(); | ||
+ | } | ||
+ | ); | ||
+ | } | ||
+ | |||
+ | // Initial processing | ||
+ | updateControlNav(); | ||
+ | doTimer(); | ||
+ | |||
+ | // Trigger the afterLoad callback | ||
+ | settings.afterLoad.call(this); | ||
+ | |||
+ | return plugin; | ||
+ | }; | ||
+ | |||
+ | // Process timer | ||
+ | var doTimer = function(){ | ||
+ | if(settings.pauseTime && settings.pauseTime > 0){ | ||
+ | clearTimeout(timer); | ||
+ | timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | // Update controlNav | ||
+ | var updateControlNav = function(){ | ||
+ | if(settings.controlNav){ | ||
+ | $('.lean-slider-control-nav', settings.controlNav).removeClass('active'); | ||
+ | $($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active'); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | // Prev | ||
+ | plugin.prev = function(){ | ||
+ | // Trigger the beforeChange callback | ||
+ | settings.beforeChange.call(this, currentSlide); | ||
+ | |||
+ | currentSlide--; | ||
+ | if(currentSlide < 0) currentSlide = slides.length - 1; | ||
+ | slides.removeClass('current'); | ||
+ | $(slides[currentSlide]).addClass('current'); | ||
+ | updateControlNav(); | ||
+ | doTimer(); | ||
+ | |||
+ | // Trigger the afterChange callback | ||
+ | settings.afterChange.call(this, currentSlide); | ||
+ | }; | ||
+ | |||
+ | // Next | ||
+ | plugin.next = function(){ | ||
+ | // Trigger the beforeChange callback | ||
+ | settings.beforeChange.call(this, currentSlide); | ||
+ | |||
+ | currentSlide++; | ||
+ | if(currentSlide >= slides.length) currentSlide = 0; | ||
+ | slides.removeClass('current'); | ||
+ | $(slides[currentSlide]).addClass('current'); | ||
+ | updateControlNav(); | ||
+ | doTimer(); | ||
+ | |||
+ | // Trigger the afterChange callback | ||
+ | settings.afterChange.call(this, currentSlide); | ||
+ | }; | ||
+ | |||
+ | // Show | ||
+ | plugin.show = function(index){ | ||
+ | // Trigger the beforeChange callback | ||
+ | settings.beforeChange.call(this, currentSlide); | ||
+ | |||
+ | currentSlide = index; | ||
+ | if(currentSlide < 0) currentSlide = slides.length - 1; | ||
+ | if(currentSlide >= slides.length) currentSlide = 0; | ||
+ | slides.removeClass('current'); | ||
+ | $(slides[currentSlide]).addClass('current'); | ||
+ | updateControlNav(); | ||
+ | doTimer(); | ||
+ | |||
+ | // Trigger the afterChange callback | ||
+ | settings.afterChange.call(this, currentSlide); | ||
+ | }; | ||
+ | |||
+ | // Call constructor | ||
+ | return init(); | ||
+ | }; | ||
+ | |||
+ | // Defaults | ||
+ | $.fn.leanSlider.defaults = { | ||
+ | pauseTime: 4000, | ||
+ | pauseOnHover: true, | ||
+ | startSlide: 0, | ||
+ | directionNav: '', | ||
+ | directionNavPrevBuilder: '', | ||
+ | directionNavNextBuilder: '', | ||
+ | controlNav: '', | ||
+ | controlNavBuilder: '', | ||
+ | prevText: 'Prev', | ||
+ | nextText: 'Next', | ||
+ | beforeChange: function(){}, | ||
+ | afterChange: function(){}, | ||
+ | afterLoad: function(){} | ||
+ | }; | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
$(document).ready(function() { | $(document).ready(function() { | ||
//Add Inactive Class To All Accordion Headers | //Add Inactive Class To All Accordion Headers | ||
Line 325: | Line 526: | ||
<!-- menu css --> | <!-- menu css --> | ||
<div id ="contentWrap"> | <div id ="contentWrap"> | ||
+ | |||
+ | <div id="slider"> | ||
+ | <div class="slide1"> | ||
+ | <img src="images/1.jpg" alt="" /> | ||
+ | </div> | ||
+ | <div class="slide2"> | ||
+ | <img src="images/2.jpg" alt="" /> | ||
+ | <p>Add content in here.</p> | ||
+ | </div> | ||
+ | </div> | ||
<div id="fullwidthBanner"> | <div id="fullwidthBanner"> | ||
<img src="https://static.igem.org/mediawiki/2014/b/b2/Demobannerimage.jpg"> | <img src="https://static.igem.org/mediawiki/2014/b/b2/Demobannerimage.jpg"> |
Revision as of 15:03, 9 January 2015