davidvanvickle · August 24, 2012 23:23
diff --git a/carousel.htm b/carousel.htm
 <!DOCTYPE html>
 <html>
 <head>

 <!--

 Assumes that:

 1. the jQuery library is here

 js/jquery.js

 2. these images exist:

 images/splash2/carousel-nav.png (34h x 68w button for changing image manually)
 images/splash2/splash.png (blank/background) (326 x 830)
 images/splash2/splash1.png (first image) (326 x 830)
 images/splash2/splash2.png (second image)
 images/splash2/splash3.png (..)
 images/splash2/splash4.png

 -->

 	<title>Carousel</title>

 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

 	<script type="text/javascript" src="js/jquery.js"></script>

 	<style type="text/css">

 /* overrides */

 a {
 	outline: transparent none medium;
 }


 div#carousel {
 	margin-bottom: 14px;
 	position: relative;
 	height:326px;
 	width:830px;
 	overflow: hidden;
 	background: url(images/splash2/splash.png) no-repeat scroll 0 0 transparent;
 }

 div#carousel-imgs {
 	position: relative;
 	height:326px;
 	width:830px;
 }
 div#carousel-imgs a {
 	position: absolute;
 	display: inline-block;
 	top: 0;
 	left: 0;
 	height:326px;
 	width:830px;
 }
 div#carousel-nav {
 	position: absolute;
 	top:274px;
 	left:23px;
 	width:700px;
 	height:34px;
 	overflow: hidden;
 }
 div#carousel-nav a {
 	display: inline-block;
 	margin-right: 7px;
 	height: 34px;
 	width: 34px;
 	background: url("images/splash2/carousel-nav.png") no-repeat scroll 0 0 transparent;

 }
 div#carousel-nav a.active {
 	background: url("images/splash2/carousel-nav.png") no-repeat scroll -34px 0 transparent;
 }
 div#carousel-nav a span {
 	display: none;
 }

 .carousel-imgs img {
 	display:none;
 }


 	</style>
 	<script type="text/javascript">

 var current_carousel_image = -1;
 var carousel_timer = -1;
 var carousel_images = [
 	{src:'images/splash2/splash1.png',href:'#link1',target:'_self'},
 	{src:'images/splash2/splash2.png',href:'#link2',target:'_self'},
 	{src:'images/splash2/splash3.png',href:'#link3',target:'_self'},
 	{src:'images/splash2/splash4.png',href:'#link4',target:'_self'}
 ];

 function next_carousel_image () {
 	current_carousel_image++;
 	var ct = carousel_images.length;
 	if (current_carousel_image >= ct) {
 		current_carousel_image = 0;
 	}
 	change_carousel_image(current_carousel_image);
 }

 function change_carousel_image (im) {
 	var ct = carousel_images.length;
 	var pr = im-1;
 	if (im==0) {
 		pr = ct - 1;
 	}
 	$('#carousel-imgs img').hide();
 	$('#carousel-imgs img').eq(im).fadeIn('slow');
 	var n = '';
 	var i=0;
 	for (i=0; i < ct; i++) {
 		n += '<a href="#link"'+(i==im?' class="active"':'')+' onClick="change_carousel_image('+i+');return false;"><span>6</span></a>';
 	}
 	$('#carousel-nav').html(n);
 	if (carousel_timer != -1) clearTimeout(carousel_timer);
 	carousel_timer = setTimeout('next_carousel_image()',5666);
 	current_carousel_image = im;
 }

 $(document).ready(function () {

 	var i;
 	$('#carousel-imgs').html('');
 	for (i=0; i < carousel_images.length; i++) {
 		$('#carousel-imgs').append('<a href="'+carousel_images[i].href+'" target="'+carousel_images[i].target+'"><img src="'+carousel_images[i].src+'" border="0"></a>');
 	}

 	next_carousel_image();
 });


 	</script>

 </head>
 <body>


 	<div id="carousel">
 		<div id="carousel-imgs"></div>
 		<div id="carousel-nav"></div>
 	</div>


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>

	<!--

	Assumes that:

	1. the jQuery library is here

	js/jquery.js

	2. these images exist:

	images/splash2/carousel-nav.png (34h x 68w button for changing image manually)
	images/splash2/splash.png (blank/background) (326 x 830)
	images/splash2/splash1.png (first image) (326 x 830)
	images/splash2/splash2.png (second image)
	images/splash2/splash3.png (..)
	images/splash2/splash4.png

	-->

	<title>Carousel</title>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<script type="text/javascript" src="js/jquery.js"></script>

	<style type="text/css">

	/* overrides */

	a {
	outline: transparent none medium;
	}


	div#carousel {
	margin-bottom: 14px;
	position: relative;
	height:326px;
	width:830px;
	overflow: hidden;
	background: url(images/splash2/splash.png) no-repeat scroll 0 0 transparent;
	}

	div#carousel-imgs {
	position: relative;
	height:326px;
	width:830px;
	}
	div#carousel-imgs a {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	height:326px;
	width:830px;
	}
	div#carousel-nav {
	position: absolute;
	top:274px;
	left:23px;
	width:700px;
	height:34px;
	overflow: hidden;
	}
	div#carousel-nav a {
	display: inline-block;
	margin-right: 7px;
	height: 34px;
	width: 34px;
	background: url("images/splash2/carousel-nav.png") no-repeat scroll 0 0 transparent;

	}
	div#carousel-nav a.active {
	background: url("images/splash2/carousel-nav.png") no-repeat scroll -34px 0 transparent;
	}
	div#carousel-nav a span {
	display: none;
	}

	.carousel-imgs img {
	display:none;
	}


	</style>
	<script type="text/javascript">

	var current_carousel_image = -1;
	var carousel_timer = -1;
	var carousel_images = [
	{src:'images/splash2/splash1.png',href:'#link1',target:'_self'},
	{src:'images/splash2/splash2.png',href:'#link2',target:'_self'},
	{src:'images/splash2/splash3.png',href:'#link3',target:'_self'},
	{src:'images/splash2/splash4.png',href:'#link4',target:'_self'}
	];

	function next_carousel_image () {
	current_carousel_image++;
	var ct = carousel_images.length;
	if (current_carousel_image >= ct) {
	current_carousel_image = 0;
	}
	change_carousel_image(current_carousel_image);
	}

	function change_carousel_image (im) {
	var ct = carousel_images.length;
	var pr = im-1;
	if (im==0) {
	pr = ct - 1;
	}
	$('#carousel-imgs img').hide();
	$('#carousel-imgs img').eq(im).fadeIn('slow');
	var n = '';
	var i=0;
	for (i=0; i < ct; i++) {
	n += '<a href="#link"'+(i==im?' class="active"':'')+' onClick="change_carousel_image('+i+');return false;"><span>6</span></a>';
	}
	$('#carousel-nav').html(n);
	if (carousel_timer != -1) clearTimeout(carousel_timer);
	carousel_timer = setTimeout('next_carousel_image()',5666);
	current_carousel_image = im;
	}

	$(document).ready(function () {

	var i;
	$('#carousel-imgs').html('');
	for (i=0; i < carousel_images.length; i++) {
	$('#carousel-imgs').append('<a href="'+carousel_images[i].href+'" target="'+carousel_images[i].target+'"><img src="'+carousel_images[i].src+'" border="0"></a>');
	}

	next_carousel_image();
	});


	</script>

	</head>
	<body>


	<div id="carousel">
	<div id="carousel-imgs"></div>
	<div id="carousel-nav"></div>
	</div>


	</body>
	</html>