brijeshb42 · August 29, 2015 14:02
diff --git a/explanation.js b/explanation.js
 		var nextBtn, prevBtn, images; // for storing references to next button, previous button and the images
 		var currentImage = 0; // the index of image that is to be shown initially
 		var totalImages;
 		function init() {
 		// body...
 		nextBtn = document.getElementById('nextBtn'); // get reference to next button
 		prevBtn = document.getElementById('prevBtn'); // get reference to previous button
 		images = document.getElementsByClassName('image'); // get reference to all the images

 		totalImages = images.length;  // store the count of total number of images in the slide show

 		for(var i=0; i< totalImages; i++){ // iterate through each image
 			images[i].style.display = "none";  // hide each image
 			images[i].addEventListener("click",changeImage);  // add click event on each image so that image changes when clicked upon
 		}
 		images[currentImage].style.display = "block"; // display the first image initially


 		// add event listener to previous button to respond upon when clicked
 		prevBtn.addEventListener("click",function(){
 			images[currentImage].style.display = "none"; // hide the current image
 			if(currentImage == 0){ 				// if the current image shown is the first 1, 
 				currentImage = totalImages -1;  // set currentImage to the index of last image
 			}else{
 				currentImage -= 1;	// else reduce the index of currentImage to show the previous image
 			}
 			images[currentImage].style.display = "block"; // after setting the index of current image, make it visible on the page
 		});

 		// add event listener to next button to respond upon when clicked
 		nextBtn.addEventListener("click",changeImage);
 	}

 	function changeImage(){
 		images[currentImage].style.display = "none"; // hide the current image
 		currentImage += 1; // inccrease the index of currentImage to be shown
 		currentImage %= totalImages; // if currentImage > totalImage
 		images[currentImage].style.display = "block"; // now after setting the index, make the next image visible
 	}
diff --git a/index.html b/index.html
 <!DOCTYPE HTML SYSTEM>
 <html>
 <head>
 	<title>photography </title>
 	<link href="outline.css" rel="stylesheet" type="text/css" />
 </head>
 <body onload="init()">
 	<div id = "container">
 		<div id = "heading">
 			<h1>Flux Entertainment</h1>
 		</div>
 		<div id = "banner">
 			<ul>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/home.html">Home</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/aboutus.html">About us</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/photography.html">Photography</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/videos.html">Videos</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/contactus.html">Contact us</a></li>
 			</ul>

 			<div id = "page">
 				<h2>Photography</h2>
 			</div>
 		</div>
 		<div class="pics">
 			<div class="image" id="image1">
 				<img src="img.jpg" alt="img">
 				<p class="caption">Caption of the above image 0</p>
 			</div>
 			<div class="image" id="image1">
 				<img src="img1.jpg" alt="img">
 				<p class="caption">Caption of the above image 1</p>
 			</div>
 			<div class="image" id="image1">
 				<img src="img2.jpg" alt="img">
 				<p class="caption">Caption of the above image 2</p>
 			</div>
 			<div class="image" id="image1">
 				<img src="img3.jpg" alt="img">
 				<p class="caption">Caption of the above image 3</p>
 			</div>
 			<div class="imgControl">
 				<button class="previous" id="prevBtn">&lt;&lt;</button><button class="next" id="nextBtn">&gt;&gt;</button>
 			</div>
 		</div>
 	</div>
 	<div id = "footing">
 		<footer>
 			<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>
 			<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
 		</footer>
 	</div>

 	<script>
 		var nextBtn, prevBtn, images;
 		var currentImage = 0;
 		var totalImages;
 		function init() {
 		// body...
 		nextBtn = document.getElementById('nextBtn');
 		prevBtn = document.getElementById('prevBtn');
 		images = document.getElementsByClassName('image');

 		totalImages = images.length;

 		for(var i=0; i< totalImages; i++){
 			images[i].style.display = "none";
 			images[i].addEventListener("click",changeImage);
 		}
 		images[0].style.display = "block";

 		prevBtn.addEventListener("click",function(){
 			images[currentImage].style.display = "none";
 			if(currentImage == 0){
 				currentImage = totalImages -1;
 			}else{
 				currentImage -= 1;
 			}
 			images[currentImage].style.display = "block";
 		});

 		nextBtn.addEventListener("click",changeImage);
 	}

 	function changeImage(){
 		images[currentImage].style.display = "none";
 		currentImage += 1;
 		currentImage %= totalImages;
 		images[currentImage].style.display = "block";
 	}
 </script>

 </body>
 </html>
diff --git a/outline.css b/outline.css
 body{
 	padding: 0;
 	font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
 	margin: 0;
 }

 #container{
 	width:100%;
 	min-height: 100%;
 	margin-left:auto;
 	margin-right:auto;
 	background-color:#818886;
 }
 #heading{
 	text-align:center;
 	background-color:#132920;
 	color:white;
 	padding:5px;
 }
 h2
 {
 	margin-top: 0;
 }

 #banner{
 	width: 960px;
 	margin: 0 auto;
 	clear: both;
 }

 #banner ul {
 	overflow: auto;
 	width: 100%;
 	margin: 0;
 	padding: 2px;
 	list-style: none;
 	background-color: #3a3f3d;
 	border-bottom: 1px solid #ccc;
 	border-top: 1px solid #ccc;
 	color: white;
 	/*font-family: Helvetica;*/
 }

 	#banner li {
 		width: 20%;
 		float: left;
 		text-align: center;
 	}

 	#banner li a {
 		display: block;
 		padding: 8px 15px;
 		text-decoration: none;
 		font-weight: bolder;
 		color: white;
 		font-size: 1.3em;
 		border-right: 1px solid #ccc;
 	}
 	#banner li:last-child a{
 		border: none;
 	}
 	#banner li a:hover {
 		color: white;
 		background-color: #989f9c;
 	}
 	#page{
 		text-align:center;
 		background-color:#132920;
 		color: white;
 		font-family: Helvetica;
 		padding: 5px;
 		margin-top: 2px;
 		margin-left: 2px;
 		border: 1px solid transparent;
 	}
 	#page>h2{
 		padding: 0;
 		margin: 0;
 	}
 	#content{
 		float:left;
 		background-color:gray;
 		text-align:left;
 		margin-left: 10px;
 		margin-bottom: 20px;
 		width:40%;
 		height:40%;
 	}
 	#image{
 		float:left;
 		background-color: white;
 		margin-left: 10px;
 		margin-bottom: 20px;
 	}
 	#footing{
 		text-align:center;
 		color: white;
 		background-color:#132920;
 		padding:0;
 		font-family: Helvetica;
 		clear:left;
 	}

 	form{
 		max-width: 500px;
 		margin: 0 auto;
 	}

 	form label{
 		font-size: 1.1em;
 	}
 	form input[type=submit], form input[type=reset],form input[type=text], form input[type=email],form select{
 		display: block;
 		width: 100%;
 		height: 35px;
 		font-size: 1.3em;
 	}

 .pics,.video{
 	width: 960px;
 	margin: 0 auto;
 }

 #containingBlock {
  width:100%;
 }
 .videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
 }
 .videoWrapper object,
 .videoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }

 .pics .image{
 	position: relative;
 }

 .pics img{
 	width: 100%;
 	border: 2px solid #ccc;
 }
 .pics .image .caption{
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	color: white;
 	padding: 5px 0;
 	margin: 0;
 	margin-left: 2px;
 	text-align: center;
 	background: rgba(1,1,1,0.5);
 	font-size: 1.3em;
 }
 .pics .imgControl{
 	border: 2px solid #132920;
 	overflow: auto;
 	width: 100%;
 }
 .pics .imgControl button{
 	width: 50%;
 	min-height: 40px;
 	background: #3a3f3d;
 	border: 1px solid #ccc;
 	color: white;
 	font-size: 1.2em;
 	cursor: pointer;
 }
 .pics .imgControl .previous{
 	float: left;
 }
 .pics .imgControl .next{
 	float: right;
 }
diff --git a/video.html b/video.html
 <!DOCTYPE HTML SYSTEM>
 <html>
 <head>
 	<title>Video</title>
 	<link href="outline.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 	<div id = "container">
 		<div id = "heading">
 			<h1>Flux Entertainment</h1>
 		</div>
 		<div id = "banner">
 			<ul>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/home.html">Home</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/aboutus.html">About us</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/photography.html">Photography</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/videos.html">Videos</a></li>
 				<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/contactus.html">Contact us</a></li>
 			</ul>

 			<div id = "page">
 				<h2>Video</h2>
 			</div>
 		</div>
 		<div class="video">
 			<div id="containingBlock">
 			  <div class="videoWrapper">
 			    <object width="480" height="295">
 			      <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1"></param>
 			      <param name="allowFullScreen" value="true"></param>
 			      <param name="allowscriptaccess" value="always"></param>
 			      <embed src="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
 			    </object>
 			  </div>
 			</div>
 		</div>
 	</div>
 	<div id = "footing">
 		<footer>
 			<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>
 			<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
 		</footer>
 	</div>

 </body>
 </html>
	var nextBtn, prevBtn, images; // for storing references to next button, previous button and the images
	var currentImage = 0; // the index of image that is to be shown initially
	var totalImages;
	function init() {
	// body...
	nextBtn = document.getElementById('nextBtn'); // get reference to next button
	prevBtn = document.getElementById('prevBtn'); // get reference to previous button
	images = document.getElementsByClassName('image'); // get reference to all the images

	totalImages = images.length; // store the count of total number of images in the slide show

	for(var i=0; i< totalImages; i++){ // iterate through each image
	images[i].style.display = "none"; // hide each image
	images[i].addEventListener("click",changeImage); // add click event on each image so that image changes when clicked upon
	}
	images[currentImage].style.display = "block"; // display the first image initially


	// add event listener to previous button to respond upon when clicked
	prevBtn.addEventListener("click",function(){
	images[currentImage].style.display = "none"; // hide the current image
	if(currentImage == 0){ // if the current image shown is the first 1,
	currentImage = totalImages -1; // set currentImage to the index of last image
	}else{
	currentImage -= 1; // else reduce the index of currentImage to show the previous image
	}
	images[currentImage].style.display = "block"; // after setting the index of current image, make it visible on the page
	});

	// add event listener to next button to respond upon when clicked
	nextBtn.addEventListener("click",changeImage);
	}

	function changeImage(){
	images[currentImage].style.display = "none"; // hide the current image
	currentImage += 1; // inccrease the index of currentImage to be shown
	currentImage %= totalImages; // if currentImage > totalImage
	images[currentImage].style.display = "block"; // now after setting the index, make the next image visible
	}
	<!DOCTYPE HTML SYSTEM>
	<html>
	<head>
	<title>photography </title>
	<link href="outline.css" rel="stylesheet" type="text/css" />
	</head>
	<body onload="init()">
	<div id = "container">
	<div id = "heading">
	<h1>Flux Entertainment</h1>
	</div>
	<div id = "banner">
	<ul>
	<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/home.html">Home</a></li>
	<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/aboutus.html">About us</a></li>
	<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/photography.html">Photography</a></li>
	<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/videos.html">Videos</a></li>
	<li><a href="http://webpages.uncc.edu/~mbrito/WebProject/contactus.html">Contact us</a></li>
	</ul>

	<div id = "page">
	<h2>Photography</h2>
	</div>
	</div>
	<div class="pics">
	<div class="image" id="image1">
	<img src="img.jpg" alt="img">
	<p class="caption">Caption of the above image 0</p>
	</div>
	<div class="image" id="image1">
	<img src="img1.jpg" alt="img">
	<p class="caption">Caption of the above image 1</p>
	</div>
	<div class="image" id="image1">
	<img src="img2.jpg" alt="img">
	<p class="caption">Caption of the above image 2</p>
	</div>
	<div class="image" id="image1">
	<img src="img3.jpg" alt="img">
	<p class="caption">Caption of the above image 3</p>
	</div>
	<div class="imgControl">
	<button class="previous" id="prevBtn"><<</button><button class="next" id="nextBtn">>></button>
	</div>
	</div>
	</div>
	<div id = "footing">
	<footer>
	<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>
	<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
	</footer>
	</div>

	<script>
	var nextBtn, prevBtn, images;
	var currentImage = 0;
	var totalImages;
	function init() {
	// body...
	nextBtn = document.getElementById('nextBtn');
	prevBtn = document.getElementById('prevBtn');
	images = document.getElementsByClassName('image');

	totalImages = images.length;

	for(var i=0; i< totalImages; i++){
	images[i].style.display = "none";
	images[i].addEventListener("click",changeImage);
	}
	images[0].style.display = "block";

	prevBtn.addEventListener("click",function(){
	images[currentImage].style.display = "none";
	if(currentImage == 0){
	currentImage = totalImages -1;
	}else{
	currentImage -= 1;
	}
	images[currentImage].style.display = "block";
	});

	nextBtn.addEventListener("click",changeImage);
	}

	function changeImage(){
	images[currentImage].style.display = "none";
	currentImage += 1;
	currentImage %= totalImages;
	images[currentImage].style.display = "block";
	}
	</script>

	</body>
	</html>
	body{
	padding: 0;
	font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
	margin: 0;
	}

	#container{
	width:100%;
	min-height: 100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#818886;
	}
	#heading{
	text-align:center;
	background-color:#132920;
	color:white;
	padding:5px;
	}
	h2
	{
	margin-top: 0;
	}

	#banner{
	width: 960px;
	margin: 0 auto;
	clear: both;
	}

	#banner ul {
	overflow: auto;
	width: 100%;
	margin: 0;
	padding: 2px;
	list-style: none;
	background-color: #3a3f3d;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	color: white;
	/font-family: Helvetica;/
	}

	#banner li {
	width: 20%;
	float: left;
	text-align: center;
	}

	#banner li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bolder;
	color: white;
	font-size: 1.3em;
	border-right: 1px solid #ccc;
	}
	#banner li:last-child a{
	border: none;
	}
	#banner li a:hover {
	color: white;
	background-color: #989f9c;
	}
	#page{
	text-align:center;
	background-color:#132920;
	color: white;
	font-family: Helvetica;
	padding: 5px;
	margin-top: 2px;
	margin-left: 2px;
	border: 1px solid transparent;
	}
	#page>h2{
	padding: 0;
	margin: 0;
	}
	#content{
	float:left;
	background-color:gray;
	text-align:left;
	margin-left: 10px;
	margin-bottom: 20px;
	width:40%;
	height:40%;
	}
	#image{
	float:left;
	background-color: white;
	margin-left: 10px;
	margin-bottom: 20px;
	}
	#footing{
	text-align:center;
	color: white;
	background-color:#132920;
	padding:0;
	font-family: Helvetica;
	clear:left;
	}

	form{
	max-width: 500px;
	margin: 0 auto;
	}

	form label{
	font-size: 1.1em;
	}
	form input[type=submit], form input[type=reset],form input[type=text], form input[type=email],form select{
	display: block;
	width: 100%;
	height: 35px;
	font-size: 1.3em;
	}

	.pics,.video{
	width: 960px;
	margin: 0 auto;
	}

	#containingBlock {
	width:100%;
	}
	.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
	}
	.videoWrapper object,
	.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.pics .image{
	position: relative;
	}

	.pics img{
	width: 100%;
	border: 2px solid #ccc;
	}
	.pics .image .caption{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: white;
	padding: 5px 0;
	margin: 0;
	margin-left: 2px;
	text-align: center;
	background: rgba(1,1,1,0.5);
	font-size: 1.3em;
	}
	.pics .imgControl{
	border: 2px solid #132920;
	overflow: auto;
	width: 100%;
	}
	.pics .imgControl button{
	width: 50%;
	min-height: 40px;
	background: #3a3f3d;
	border: 1px solid #ccc;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
	}
	.pics .imgControl .previous{
	float: left;
	}
	.pics .imgControl .next{
	float: right;
	}