aaronbalthaser/README.txt

## README.txt
1. Upload the css and js files to the server.
2. Add the link to the css file in the head of your html page.
	- Example:
	<link rel="stylesheet" href="css/main.css">
3. Add the link to the js file in the head of your html page or within the body tag.
	- Example:
	<link rel="stylesheet" href="js/main.js">
4. Add the following block of code to your html page and update the image path to your image.
		<div class="rotator">
        	<figure class="show">
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
			</figure>
		    <span class="prev">«</span>
		    <span class="next">»</span>
		</div>
5. To add more images simply paste in the following code and update the image path.
			<figure>
			    <img alt="" src="http://placehold.it/1600x800" width="100%" width="100%" />&nbsp;
			    <figcaption>Image caption goes here.</figcaption>
			</figure>
6. The resulting code would look like this.
		<div class="rotator">
        	    <figure class="show">
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <figure>
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <figure>
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <span class="prev">«</span>
		    <span class="next">»</span>
		</div>
7. To add auto rotate functionality add the auto class to the container div
	- Example
	<div class="rotator auto”>

	</div>

## index.html
<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Boilerplate</title>
        <link rel="stylesheet" href="main.css">

    </head>
    <body>

        <div class="rotator">
        	<figure class="show">
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				    <figcaption>Image caption goes here.</figcaption>
			    </figure>
			    <figure>
				    <img alt="" src="http://placehold.it/1600x800" width="100%" width="100%" />&nbsp;
				    <figcaption>Image caption goes here.</figcaption>
			    </figure>
			    <span class="prev">«</span>
			    <span class="next">»</span>
		    </div>

    <script src="main.js"></script>

</body>
</html>

## main.css
.rotator {
	position: relative;
	display: block;
	overflow: hidden;
}

figure {
	position: absolute;
	opacity: 0;
	transition: 1s opacity;
}

figcaption {
	position: absolute;
	font-family: sans-serif;
	font-size: .8em;
	bottom: .75em;
	right: .35em;
	padding: .25em;
	color: #fff;
	background: rgba(0, 0, 0, .25);
	border-radius: 2px;
}

figcaption a {
	color: #fff;
}

figure.show {
	opacity: 1;
	position: static;
	transition: 1s opacity;
}

.next,
.prev {
	color: #fff;
	position: absolute;
	background: rgba(0, 0, 0, .6);
	top: 50%;
	z-index: 1;
	font-size: 2em;
	margin-top: -.75em;
	opacity: .3;
	user-select: none;
}

.next:hover,
.prev:hover {
	cursor: pointer;
	opacity: 1;
}

.next {
	right: 0;
	padding: 10px 5px 15px 10px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.prev {
	left: 0;
	padding: 10px 10px 15px 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

## main.js
(function() {

	var counter = 0;
	var auto = document.querySelector('.auto');

	// gets the figure elements
	var img = document.querySelectorAll('.rotator figure');

	// caches the number of figure elements
	var numItems = img.length;

	// event utility used to deal with IE8 junk
	var eventUtility = {

		addEvent: function(el, type, fn)
	    {
	        if (typeof addEventListener !== 'undefined') {
	            el.addEventListener(type, fn, false);
	        } else if (typeof attachEvent !== 'undefined') {
	            el.attachEvent("on" + type, fn);
	        } else {
	            el["on" + type] = fn;
	        }
	    },

	    getTarget: function(e)
	    {
	        if (typeof e.target !== 'undefined') {
	            return e.target;
	        } else {
	            return e.srcElement;
	        }
	    },

	    preventDefault: function(e)
	    {
	        if (typeof e.preventDefault !== 'undefined') {
	            e.preventDefault();
	        } else {
	            e.returnValue = false;
	        }
	    }
	}

	// enables auto advance if the auto class is found
	if (auto) {
		setInterval(next, 5000);
	}

	// event delegation
	function clickHandler(e)
	{
		var target = eventUtility.getTarget(e);
		console.log(target);
		if (target.className == 'next') {
			next();
		}

		if (target.className == 'prev') {
			prev();
		}
	}

	// keeps track of the count variable
	function showCurrent()
	{
		var itemToShow = Math.abs(counter % numItems);

		[].forEach.call( img, function(el) {
			el.classList.remove('show');
		});

		img[itemToShow].classList.add('show');
	}

	// increments the count varialble to show the next image
	function next()
	{
		counter++;
		showCurrent();
	}

	// decrements the count variable to show the previous image
	function prev()
	{
		counter--;
		showCurrent();
	}

	eventUtility.addEvent(document, 'click', clickHandler);

})();
	1. Upload the css and js files to the server.
	2. Add the link to the css file in the head of your html page.
	- Example:
	<link rel="stylesheet" href="css/main.css">
	3. Add the link to the js file in the head of your html page or within the body tag.
	- Example:
	<link rel="stylesheet" href="js/main.js">
	4. Add the following block of code to your html page and update the image path to your image.
	<div class="rotator">
	<figure class="show">
	<img alt="" src="http://placehold.it/1600x800" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<span class="prev">«</span>
	<span class="next">»</span>
	</div>
	5. To add more images simply paste in the following code and update the image path.
	<figure>
	<img alt="" src="http://placehold.it/1600x800" width="100%" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	6. The resulting code would look like this.
	<div class="rotator">
	<figure class="show">
	<img alt="" src="http://placehold.it/1600x800" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<figure>
	<img alt="" src="http://placehold.it/1600x800" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<figure>
	<img alt="" src="http://placehold.it/1600x800" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<span class="prev">«</span>
	<span class="next">»</span>
	</div>
	7. To add auto rotate functionality add the auto class to the container div
	- Example
	<div class="rotator auto”>

	</div>
	<!doctype html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<title>Boilerplate</title>
	<link rel="stylesheet" href="main.css">

	</head>
	<body>

	<div class="rotator">
	<figure class="show">
	<img alt="" src="http://placehold.it/1600x800" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<figure>
	<img alt="" src="http://placehold.it/1600x800" width="100%" width="100%" />
	<figcaption>Image caption goes here.</figcaption>
	</figure>
	<span class="prev">«</span>
	<span class="next">»</span>
	</div>

	<script src="main.js"></script>

	</body>
	</html>
	.rotator {
	position: relative;
	display: block;
	overflow: hidden;
	}

	figure {
	position: absolute;
	opacity: 0;
	transition: 1s opacity;
	}

	figcaption {
	position: absolute;
	font-family: sans-serif;
	font-size: .8em;
	bottom: .75em;
	right: .35em;
	padding: .25em;
	color: #fff;
	background: rgba(0, 0, 0, .25);
	border-radius: 2px;
	}

	figcaption a {
	color: #fff;
	}

	figure.show {
	opacity: 1;
	position: static;
	transition: 1s opacity;
	}

	.next,
	.prev {
	color: #fff;
	position: absolute;
	background: rgba(0, 0, 0, .6);
	top: 50%;
	z-index: 1;
	font-size: 2em;
	margin-top: -.75em;
	opacity: .3;
	user-select: none;
	}

	.next:hover,
	.prev:hover {
	cursor: pointer;
	opacity: 1;
	}

	.next {
	right: 0;
	padding: 10px 5px 15px 10px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	}

	.prev {
	left: 0;
	padding: 10px 10px 15px 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	}
	(function() {

	var counter = 0;
	var auto = document.querySelector('.auto');

	// gets the figure elements
	var img = document.querySelectorAll('.rotator figure');

	// caches the number of figure elements
	var numItems = img.length;

	// event utility used to deal with IE8 junk
	var eventUtility = {

	addEvent: function(el, type, fn)
	{
	if (typeof addEventListener !== 'undefined') {
	el.addEventListener(type, fn, false);
	} else if (typeof attachEvent !== 'undefined') {
	el.attachEvent("on" + type, fn);
	} else {
	el["on" + type] = fn;
	}
	},

	getTarget: function(e)
	{
	if (typeof e.target !== 'undefined') {
	return e.target;
	} else {
	return e.srcElement;
	}
	},

	preventDefault: function(e)
	{
	if (typeof e.preventDefault !== 'undefined') {
	e.preventDefault();
	} else {
	e.returnValue = false;
	}
	}
	}

	// enables auto advance if the auto class is found
	if (auto) {
	setInterval(next, 5000);
	}

	// event delegation
	function clickHandler(e)
	{
	var target = eventUtility.getTarget(e);
	console.log(target);
	if (target.className == 'next') {
	next();
	}

	if (target.className == 'prev') {
	prev();
	}
	}

	// keeps track of the count variable
	function showCurrent()
	{
	var itemToShow = Math.abs(counter % numItems);

	[].forEach.call( img, function(el) {
	el.classList.remove('show');
	});

	img[itemToShow].classList.add('show');
	}

	// increments the count varialble to show the next image
	function next()
	{
	counter++;
	showCurrent();
	}

	// decrements the count variable to show the previous image
	function prev()
	{
	counter--;
	showCurrent();
	}

	eventUtility.addEvent(document, 'click', clickHandler);

	})();