jQuery 3 part slider

Discussion in 'Javascript' started by Ketab Luki, Apr 20, 2016.

  1. Ketab Luki

    Ketab Luki

    Joined:
    Apr 20, 2016
    Messages:
    1
    Likes Received:
    0
    Hey Guys,
    I wanna recreate this Sliderhttp://jkweb.ch/de/angebot
    I even got the 3 steps from the administration but I wasn't able to recreate it.
    This was the message from the admin:"

    There are 3 parts

    1. Slider: we used the jQuery Plugin http://refreshless.com/nouislider/. the Markup on the html site is
    <div class="slider"></div>

    the JS Code is

    $('.slider').noUiSlider({
    start: [ 1500 ],
    step: 50,
    range: {
    'min': min,
    'max': max
    }
    });

    with css you can style it as you want to. our styles are in screen.css at line 1684.

    2. the animation at the beginning. we switch the slider "manually" with javascript using a CSS3 Transition. the code is pretty long and brushe but as well as trivial:

    setTimeout(function() {
    // move slider at the beginning
    origLeft = $(".slider .noUi-origin").addClass("anim").addClass("bla");
    //$(".slider .noUi-origin").attr("style","");
    //$(".slider .noUi-origin").animate({"margin-left":180},800);
    setTimeout(function() {
    //$(".slider .noUi-origin").animate({"margin-left":-180},800);
    $(".slider .noUi-origin").removeClass("bla").addClass("blabla");
    setTimeout(function() {
    $(".slider .noUi-origin").removeClass("blabla");
    //$(".slider .noUi-origin").animate({"margin-left":0},800);

    $("#price-adjust").countTo({
    from: 800,
    to: 1500,
    speed: 700,
    refreshInterval: 50,
    onComplete: function(value) {
    console.debug(this);
    $(".slider .noUi-origin").removeClass("anim");
    //$(".slider .noUi-origin").css("margin-left",100);
    }
    });
    }, 800);
    $("#price-adjust").countTo({
    from: 1900,
    to: 800,
    speed: 700,
    refreshInterval: 50,
    onComplete: function(value) {

    }
    });
    }, 800);


    $("#price-adjust").countTo({
    from: 1500,
    to: 1900,
    speed: 700,
    refreshInterval: 50,
    onComplete: function(value) {

    }
    });


    }, 1400);

    we have 3 complex functions, which are used with setTimeout(fnc, timeout) and are each time shifted: the shift to the left (class .bla) to the right (class .blabla) responsible for, these both classes have a simple margin-left property, which is animated, details are also in screen.css at line 1534ff. the animation of the number is with the jquery code


    (function($) {
    $.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
    increment = (options.to - options.from) / loops;

    return $(this).each(function() {
    var _this = this,
    loopCount = 0,
    value = options.from,
    interval = setInterval(updateTimer, options.refreshInterval);

    function updateTimer() {
    value += increment;
    loopCount++;
    $(_this).html(value.toFixed(options.decimals));

    if (typeof(options.onUpdate) == 'function') {
    options.onUpdate.call(_this, value);
    }

    if (loopCount >= loops) {
    clearInterval(interval);
    value = options.to;

    if (typeof(options.onComplete) == 'function') {
    options.onComplete.call(_this, value);
    }
    }
    }
    });
    };

    $.fn.countTo.defaults = {
    from: 0,
    // the number the element should start at
    to: 100,
    // the number the element should end at
    speed: 1000,
    // how long it should take to count between the target numbers
    refreshInterval: 100,
    // how often the element should be updated
    decimals: 0,
    // the number of decimal places to show
    onUpdate: null,
    // callback method for every time the element is updated,
    onComplete: null,
    // callback method for when the element finishes updating
    };
    })(jQuery);

    umgesetzt.

    3. the adjustment of the picture while using the slider. for this effect we are using 2 pictures which are with position: absolute on above the other one. Both pictures show the same picture, one of them is edited with photoshop to look old. if you swith the slider the picture above gets increasingly invisible, using a according opacity Styling. the JS code is

    var makeGray = function() {
    pr = parseInt($(".slider").val());
    gr = Math.round((1 - (pr - min) / (max - min)) * 100);
    gr_1 = 1 - gr / 100;
    //gr_1 = (1-gr_1)/2+0.5
    //$(".angebot-header .img").css(prefix.css + 'filter','grayscale('+gr+'%)');
    $(".angebot-header .img").css('opacity', gr_1);
    //$(".angebot-header .img").css(prefix.css + 'filter','blur('+gr+'px)');
    };

    So if somenone could help me to put the pieces together and make it work, I would even pay if you want. I tried about 5 houres and it didn't work. I'm really desperatley.
    Thank you
     
    Ketab Luki, Apr 20, 2016
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.