Slideshow from Images Array

By Kirk on May 15th, 2009

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a JavaScript image slideshow with next and previous links that use an array. Loop the script so the slideshow never reaches an end.

The HTML solution:

<html>
<head>
	<title>NASA Patches Slideshow</title>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" rev="stylesheet" href="styles.css" />
</head>
<body>
	<div align="center">
		<h1>NASA Patches Slideshow</h1>
		<img src="images/nasa.jpeg" id="currentPicture" width="201" height="155" alt="Slideshow" />
		<h2>
        	<a href="previous.html" id="prevLink">&laquo; Previous</a>&nbsp;&nbsp;
            <a href="next.html" id="nextLink">Next &raquo;</a></h2>
	</div>
</body>
</html>

The JavaScript solution:

window.onload = initLinks;

// create array of pictures/strings
var myPics = new Array("images/nasa.jpeg", "images/columbia1.gif", "images/columbia2.jpeg", "images/columbia3.jpg", "images/columbia4.jpeg", "images/challenger.jpeg");

// track currently displayed image, set to 0
var thisPic = 0;

// handle behaviors when next and previous links are clicked
function initLinks() {
	// when prevLink is clicked, call function to fetch the previous pic
	document.getElementById("prevLink").onclick = processPrevious;
	// when nextLink is clicked, call function to fetch the next pic
	document.getElementById("nextLink").onclick = processNext;
}

// called when prevLink is clicked
function processPrevious() {
	// if we are on slide 0
	if (thisPic == 0) {
		// then set thisPic to be same value as array length (meaning last picture)
		// this allows looping around the collection not reaching an end
		thisPic = myPics.length;
	}
	// decrement thisPic to be one less than last pic so as to point to previous
	thisPic--;
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

// called when nextLink is clicked
function processNext() {
	// incerement thisPic to be one more than last pic so as to point to next
	thisPic++;
	// if we are on last picture in array
	if (thisPic == myPics.length) {
		// then set thisPic to be original value in array (meaning first picture)
		// this allows looping around the collection not reaching an end
		thisPic = 0;
	}
	// set source of page's displayed picture to be new current
	document.getElementById("currentPicture").src = myPics[thisPic];
	// js handled the work, so prevent next page from being fetched
	return false;
}

Here is a screenshot example of a previous slideshow image: