jQDateRangeSlider (default ctor)

by evan

HTML

<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment-with-langs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="images">
    
</div>

<div id="slider"></div>

CSS

body {
    margin: 0;
    padding: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

#images {
    visibility: hidden;
}

#slider {
    position: absolute;
    bottom: 30px;
    left: 50px;
    right: 50px;
}

JavaScript

var uuid = "045867eab6034ed2a62c7f39a306b3b1";
var day = 1000*60*60*24;

var end = new Date(),
    start = new Date(end.getTime() - day),
    hash = location.hash.replace('#', '').split(','),
    rangeStart = hash[0] || start,
    rangeEnd = hash[1] || end;

var setBackground = function (url) {
    $(document.body).css({'background-image': 'url(' + url + ')'});
};

var frame = 0;
var frames = [];
var animating = true;

var animateFrame = function () {
    setBackground(frames[frame]);
    frame = (frame + 1) % frames.length;
    if (animating) {
        setTimeout(animateFrame, 100);
    }
}

$(function () {
    $("#slider").dateRangeSlider({
        bounds: {
            min: start,
            max: end
        },
        defaultValues: {
            min: rangeStart,
            max: rangeEnd
        },
        formatter: function (val) {
            return moment(val).calendar();
        }
    });
    
    var range = $("#slider").dateRangeSlider('values');
    frames = getURLs(uuid, 400, rangeStart, rangeEnd);
    animateFrame();
});
  
$("#slider").on('valuesChanged', function (e, data) {
    location.hash = data.values.min.getTime() + ',' + data.values.max.getTime();
    frames = getURLs(uuid, 800, data.values.min, data.values.max);
});

var getURLs = function (uuid, width, start, end) {

	var startSeconds = Math.floor(start.getTime() / 1000),
		endSeconds = Math.floor(end.getTime() / 1000),
		diff = (endSeconds - startSeconds),
		step = Math.floor(diff / (100));

	var urls = [], url;

    $('#images img').remove();
    
	for (var i = 0; i < 100; i++) {
        url = "https://nexusapi.dropcam.com/get_image?width=" + width +
            "&uuid=" + uuid +
            "&time=" + (startSeconds + (i * step));
        urls.push(url);
        $('#images').append($('<img />', {'src': url}));
	}
    
    

	return urls;
};