matharchod/slideshow.html

## slideshow.html
<html>
<head>
<title>Gallery Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

slides = [
	"images/plug2-offline-icon.jpg",
	"images/notsign-offline-icon.jpg",
	"images/globe-offline-icon.jpg",
	"images/computers-offline-icon.jpg",
	"images/computers3-offline-icon.jpg",
	"images/cloud-offline-icon.jpg"
];

var num = 0;
var ImgLength = slides.length - 1;
var lock = false;
var run;

function chgImg(direction) {

	if (document.images) {

		num = num + direction;

		if (num > ImgLength) {
			num = 0;
		}

		if (num < 0) {
			num = ImgLength;
		}

		//slides[num] = string for image link
		document.slideshow.src = slides[num];
		return console.log(slides[num]);
	}
}

function auto(delay) {
	var delay = delay;
	if (lock == true) {
		lock = false;
		window.clearInterval(run);
	}
	else if (lock == false) {
		lock = true;
		run = setInterval("chgImg(1)", delay);
   }
}

//DOC READY
$(function(){
	$('#forward').click( function() {
		chgImg(1);
	});
	$('#back').click( function() {
		chgImg(-1);
	});
	$('#auto').click( function() {
		auto(300);
	});
});

</script>
</head>
<body>

<img src="images/cloud-offline-icon.jpg" name="slideshow">

<table>
<tr>
<td align="right"><a href="#" id="back">Previous</a></td>
<td align="center"><a href="#" id="auto">Auto/Stop</a></td>
<td align="left"><a href="#" id="forward">Next</a></td>
</tr>
</table>


</body>
</html>
	<html>
	<head>
	<title>Gallery Test</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">

	slides = [
	"images/plug2-offline-icon.jpg",
	"images/notsign-offline-icon.jpg",
	"images/globe-offline-icon.jpg",
	"images/computers-offline-icon.jpg",
	"images/computers3-offline-icon.jpg",
	"images/cloud-offline-icon.jpg"
	];

	var num = 0;
	var ImgLength = slides.length - 1;
	var lock = false;
	var run;

	function chgImg(direction) {

	if (document.images) {

	num = num + direction;

	if (num > ImgLength) {
	num = 0;
	}

	if (num < 0) {
	num = ImgLength;
	}

	//slides[num] = string for image link
	document.slideshow.src = slides[num];
	return console.log(slides[num]);
	}
	}

	function auto(delay) {
	var delay = delay;
	if (lock == true) {
	lock = false;
	window.clearInterval(run);
	}
	else if (lock == false) {
	lock = true;
	run = setInterval("chgImg(1)", delay);
	}
	}

	//DOC READY
	$(function(){
	$('#forward').click( function() {
	chgImg(1);
	});
	$('#back').click( function() {
	chgImg(-1);
	});
	$('#auto').click( function() {
	auto(300);
	});
	});

	</script>
	</head>
	<body>

	<img src="images/cloud-offline-icon.jpg" name="slideshow">

	<table>
	<tr>
	<td align="right"><a href="#" id="back">Previous</a></td>
	<td align="center"><a href="#" id="auto">Auto/Stop</a></td>
	<td align="left"><a href="#" id="forward">Next</a></td>
	</tr>
	</table>


	</body>
	</html>