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

Retrieved from "http://2014.igem.org/Template:Sifuentes01"