fisshy/dynamic-background-images

## dynamic-background-images
A little lib i made for a friend of mine.

Include dynamic-images.css
Include dynamic-images.js

Create the dynamic-images.json on your server ( see the format )

Include setup-dynamic-images.js

Point url to dynamic-images.json that you created on your server.


http://www.devfishy.se/dynamic

## dynamic-images.css
body, html{
    height:100%;
}

body{
    height:100%;
    width:100%;
}

.body-class{

    display:block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;

    cursor:pointer;

    width:100%;
    height:100%;
    z-index: -100;

    left:0;
    top:0;

    position: absolute;

    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.active{
    opacity:1;
}

.hide{
    opacity: 0;
}

## dynamic-images.html
<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="user-scalable=no, width=device-width" />
      <title>Dynamic</title>
      <link rel='stylesheet' href='/stylesheets/dynamic-images.css' />
  </head>
  <body>

    <script src="/javascripts/dynamic-background/dynamic-images.js"></script>
  </body>
</html>

## dynamic-images.js
(function(dynamic){
    "use strict";

    var self = this;

    dynamic.settings = {};
    dynamic.current;
    dynamic.cachedElemnts = [];

    dynamic.onclick = function( current ){
        if( current.url ){
            window.location = current.url;
        }
    };

    dynamic.settings = function(settings){
        dynamic.settings = settings;
        return dynamic;
    };

    dynamic.get = function(callback){
        var xhr = new XMLHttpRequest();
        xhr.open( 'GET', dynamic.settings.url, true );
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                callback( JSON.parse( this.responseText.trim() ) );
            }
        };
        xhr.send();
    }

    dynamic.start = function(){
        dynamic.get(function(data){
            if( data ){

                var target =  document.getElementsByTagName('body')[0];

                target.addEventListener('click', function(e){
                    if(e.target === target){
                        if(dynamic.current) {
                            dynamic.onclick(dynamic.current);
                        }
                    }
                });

                preLoad(data);
                loop(data, target, 0);
            }
        });
    };

    dynamic.click = function(listener){
        dynamic.onclick = listener;
        return dynamic;
    };

    function preLoad(images){

        var target = document.getElementsByTagName('body')[0];

        for(var i = 0; i < images.length; i++){
            var elem = document.createElement('div');
            elem.className = dynamic.settings.targetClass + ' ' + (i == 0 ? 'active' : 'hide');
            elem.style.backgroundImage = "url("  + images[i].image + ")";
            dynamic.cachedElemnts.push(elem);
            target.appendChild(elem);
        }

    }

    function loop(images, target, index){

        setTimeout(function(){

            if(index === images.length){
                index = 0;
            }

            dynamic.current =  images[index];

            var previous = dynamic.cachedElemnts[(index - 1) < 0 ? (images.length - 1) : (index - 1)],
                current = dynamic.cachedElemnts[index];

            previous.className = dynamic.settings.targetClass + ' hide';
            current.className = dynamic.settings.targetClass + ' active';

            index++;

            loop(images, target, index);

        }, dynamic.settings.speed);

    };


})(window.dynamic = window.dynamic || {});

## dynamic-images.json
[
    { "url" : "http://www.brabil.se",           "image" : "/images/dynamic-background/bkg1_2560.jpg" },
    { "url" : "http://www.google.se",           "image" : "/images/dynamic-background/bkg2_2560.jpg" },
    { "url" : "http://www.brabil.se/Volvo",     "image" : "/images/dynamic-background/bkg3_2560.jpg" }
]

## setup-dynamic-images.js
dynamic.settings({

    url : '/javascripts/dynamic-background/dynamic-images.json',
    targetClass : 'body-class',
    speed : 3000

}).start();


/*This works aswell, if you want an click listener*/

dynamic.settings({

    url : '/javascripts/dynamic-background/dynamic-images.json',
    targetClass : 'body-class',
    speed : 3000

}).click(function(image){
    /* Do somthing with image object */
}).start();
	A little lib i made for a friend of mine.

	Include dynamic-images.css
	Include dynamic-images.js

	Create the dynamic-images.json on your server ( see the format )

	Include setup-dynamic-images.js

	Point url to dynamic-images.json that you created on your server.


	http://www.devfishy.se/dynamic
	body, html{
	height:100%;
	}

	body{
	height:100%;
	width:100%;
	}

	.body-class{

	display:block;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;

	cursor:pointer;

	width:100%;
	height:100%;
	z-index: -100;

	left:0;
	top:0;

	position: absolute;

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

	}

	.active{
	opacity:1;
	}

	.hide{
	opacity: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="user-scalable=no, width=device-width" />
	<title>Dynamic</title>
	<link rel='stylesheet' href='/stylesheets/dynamic-images.css' />
	</head>
	<body>

	<script src="/javascripts/dynamic-background/dynamic-images.js"></script>
	</body>
	</html>
	(function(dynamic){
	"use strict";

	var self = this;

	dynamic.settings = {};
	dynamic.current;
	dynamic.cachedElemnts = [];

	dynamic.onclick = function( current ){
	if( current.url ){
	window.location = current.url;
	}
	};

	dynamic.settings = function(settings){
	dynamic.settings = settings;
	return dynamic;
	};

	dynamic.get = function(callback){
	var xhr = new XMLHttpRequest();
	xhr.open( 'GET', dynamic.settings.url, true );
	xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
	callback( JSON.parse( this.responseText.trim() ) );
	}
	};
	xhr.send();
	}

	dynamic.start = function(){
	dynamic.get(function(data){
	if( data ){

	var target = document.getElementsByTagName('body')[0];

	target.addEventListener('click', function(e){
	if(e.target === target){
	if(dynamic.current) {
	dynamic.onclick(dynamic.current);
	}
	}
	});

	preLoad(data);
	loop(data, target, 0);
	}
	});
	};

	dynamic.click = function(listener){
	dynamic.onclick = listener;
	return dynamic;
	};

	function preLoad(images){

	var target = document.getElementsByTagName('body')[0];

	for(var i = 0; i < images.length; i++){
	var elem = document.createElement('div');
	elem.className = dynamic.settings.targetClass + ' ' + (i == 0 ? 'active' : 'hide');
	elem.style.backgroundImage = "url(" + images[i].image + ")";
	dynamic.cachedElemnts.push(elem);
	target.appendChild(elem);
	}

	}

	function loop(images, target, index){

	setTimeout(function(){

	if(index === images.length){
	index = 0;
	}

	dynamic.current = images[index];

	var previous = dynamic.cachedElemnts[(index - 1) < 0 ? (images.length - 1) : (index - 1)],
	current = dynamic.cachedElemnts[index];

	previous.className = dynamic.settings.targetClass + ' hide';
	current.className = dynamic.settings.targetClass + ' active';

	index++;

	loop(images, target, index);

	}, dynamic.settings.speed);

	};


	})(window.dynamic = window.dynamic \|\| {});
	[
	{ "url" : "http://www.brabil.se", "image" : "/images/dynamic-background/bkg1_2560.jpg" },
	{ "url" : "http://www.google.se", "image" : "/images/dynamic-background/bkg2_2560.jpg" },
	{ "url" : "http://www.brabil.se/Volvo", "image" : "/images/dynamic-background/bkg3_2560.jpg" }
	]
	dynamic.settings({

	url : '/javascripts/dynamic-background/dynamic-images.json',
	targetClass : 'body-class',
	speed : 3000

	}).start();


	/This works aswell, if you want an click listener/

	dynamic.settings({

	url : '/javascripts/dynamic-background/dynamic-images.json',
	targetClass : 'body-class',
	speed : 3000

	}).click(function(image){
	/* Do somthing with image object */
	}).start();