Javascript - next/previous buttons on slide show - New kid needs assistance

Question

I am brand new at this so I apologize because I'm sure an intermediate could pull his or her answer from what's already been asked, but I need specific help.

I'm having trouble getting my "next" and "previous" buttons for my slideshow to work in Javascript. Once the user clicks through all 5 images, it needs to return to the first image, ready to click through again-- a continuous loop. I think arrays are supposed to be utilized. What am I missing?

Thank you!!

var imageCache = [];  
var imageItem = 0;    
var images = 0;       

var captionNode;
var imageNode;

var $ = function (id) { 
 return document.getElementById(id); 
}

window.onload = function () {
    
    var listNode = $("image_list");  
    var nextButton = $("next");
    var previousButton = $("previous");
   
    captionNode = $("caption");
    imageNode = $("image");

    var links = listNode.getElementsByTagName("a");
    
   
    var i, linkNode, image;
    for ( i = 0; i < links.length; i++ ) {
        linkNode = links[i];
        
        // Pre-load image and copy title properties.
        image = new Image();
        image.src = linkNode.getAttribute("href");
        image.title = linkNode.getAttribute("title");
        imageCache.push(image);
    }
    // Now record the total images we have.
    images = imageCache.length;
    
    // Set up the button handlers.
    nextButton.onclick = nextButtonClick;
    previousButton.onclick = previousButtonClick;
}


    
function nextButtonClick() {
 

   
   
  
}

function previousButtonClick() {
    
   
    
}

article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    width: 380px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
}
h1, h2, ul, p {
 margin: 0;
 padding: 0;
}
h1 {
 padding-bottom: .25em;
 color: blue;
}
h2 {
 font-size: 120%;
 padding: .5em 0;
}
ul { 
 display: none;
}
img {
 height: 250px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <title>Slide Show</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<section>
    <h1>Fishing Slide Show</h1>
    <ul id="image_list">
        <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li>
        <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li>
        <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li>
        <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li>
        <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li>
    </ul>
    <h2 id="caption">Casting on the Upper Kings</h2>
    <p>
     <img src="images/casting1.jpg" alt="" id="image">
    </p>
    <input type="button" value="Previous" name="previous" id="previous">
    <input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>

There are multiple ways of doing this - but one method would be: store the current picture number in a variable (currentPic = 0;) the next() needs to test if the current pic + 1 is greater than the total number of pics. If it is then reset the currentPic to 0 else increment by one. The same thing for prev() but subtracting the counter value. — , Oct 16 '14 at 02:24
Perhaps the following answer could help you create a slider in JavaScript: http://stackoverflow.com/a/12926811/783743 — Aadit M Shah, Oct 16 '14 at 02:24
Keep a counter, say *i*, for the index of the current image. To get the next image, add 1 and mod by the number of images, i.e. `next = ++i % numImages`. So if you have seven images numbered 0 to 6, when you are at number 6 you'll get `6 + 1 % 7` which is zero, so back to the start. — RobG, Oct 16 '14 at 02:29
@mido22—the OP appears to use jQuery, but the answer has nothing to do with it. It's like driving from A to B needs a car, but the model is irrelevant. — RobG, Oct 16 '14 at 02:31

score 2 · Answer 1 · answered Oct 16 '14 at 02:41

You have the following variables:

var imageCache = [];  
var imageItem = 0;    
var images = 0;

Presumably imageItem is the index of the currently displayed image (e.g. 0 for the first one) and images is the number of images (i.e. imageCache.length). To get the next image:

imageItem     = ++imageItem % images;
var nextImage = imageCache[imageItem];

This will wrap around to zero when imageItem reaches the number of images in the cache. Similarly for previous:

imageItem     = (--imageItem + images) % images;
var prevImage = imageCache[imageItem];

so that when imageItem reaches 0, subtracting 1 goes to -1 and adding imageCache.length sets it to the last image. The rest of the time it's left at imageItem - 1.

It's up to you to fill in the rest of the code. :-)

score 0 · Answer 2 · answered Oct 16 '14 at 04:27

I would use an array zipper to implement the next and prev functions. An array zipper is a data structure that allows you to move forward and backward through an array.

function ArrayZipper(array) {
    var length = array.length, index = 0;

    this.getCurrent = function () {
        return array[index];
    };

    this.getNext = function () {
        return array[index = (index + 1) % length];
    };

    this.getPrevious = function () {
        return array[index = (length + index - 1) % length];
    };
}

You can use an array zipper to create a slide show as follows:

var zipper = new ArrayZipper([ "black"
                             , "blue"
                             , "green"
                             , "cyan"
                             , "red"
                             , "magenta"
                             , "yellow"
                             , "white"
                            ]);

var style = $("color").style;

style.backgroundColor = zipper.getCurrent();

$("next").addEventListener("click", function () {
    style.backgroundColor = zipper.getNext();
});

$("prev").addEventListener("click", function () {
    style.backgroundColor = zipper.getPrevious();
});

function $(id) {
    return document.getElementById(id);
}

function ArrayZipper(array) {
    var length = array.length, index = 0;

    this.getCurrent = function () {
        return array[index];
    };

    this.getNext = function () {
        return array[index = (index + 1) % length];
    };

    this.getPrevious = function () {
        return array[index = (length + index - 1) % length];
    };
}

#color {
    height: 100px;
    width: 100px;
}

<div id="color"></div>
<button id="next">Next</button>
<button id="prev">Prev</button>

Hope that helps.

Javascript - next/previous buttons on slide show - New kid needs assistance

2 Answers2