I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.
Ok let's get started with this example.
First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:
CODE
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.
CODE
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.
CODE
<div class="slideShow">
<div class="setTitle">Jaguars Track and Field Photos</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:
CODE
<div id="slideShow">
...
<div id="slide10">
<div class="slideTitle">Your Slide Title</div>
<img src="pic10.jpg" height="600" width="430" border="0" />
</div>
....
</div>
Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Slideshow</title>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
//]]>
// -->
</script>
<style type="text/css">
<!--
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
-->
</style>
</head>
<body>
<div class="slideShow">
<div class="setTitle">Your Title</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle">Picture 03</div>
<img src="pic03.jpg" height="300" width="400" border="0" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle">Picture 04</div>
<img src="pic04.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
</body>
</html>
There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks
