|
|
(4 intermediate revisions not shown) |
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 304: |
Line 280: |
| | | |
| <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 515: |
Line 314: |
| } | | } |
| }); | | }); |
| + | |
| + | //$this.find("a").trigger("click") |
| | | |
| </script> | | </script> |
Line 526: |
Line 327: |
| <!-- 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/c/cb/Demobannerimage2.jpg" width="970px"> |
| </div> | | </div> |
| | | |