JavaScript Click images with button navigation

Question

New to web development and trying to create a gallery of images that cycle through with the click of a "previous" and "next" button. Does anybody know how to do this? I don't think I've done anything right but I'll include what I've done so far. The idea is to make this adaptable to n indefinite number of images.

code:

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" onclick="prevImage()" class="portfolioNavigation">Previous</button>
 <button id= "next" onclick="nextImage()" class="portfolioNavigation">Next</button>
     <script type= "text/javascript">
   var counter = 2;
   var 1 = "photos/1.jpg";
   var 2 = "photos/2.jpg";
   var 3 = "photos/3.jpg";

prev.onclick = function(){
        document.getElementById("currentImage").src = counter - 1;
        counter--;
    }
next.onclick = function(){
        document.getElementById("currentImage").src = counter + 1;
        counter++;
    }

if(counter == 3){
        counter = 0;
    };
</script>

1, 2, and 3, aren't valid variable names, for a start. w3schools.com/js/js_variables.asp. And then accessing them how you are counter + 1 isn't doing what you think either. You care setting whatever the result of that is to be the src of the image. (src="2", for example). — lemieuxster
– lemieuxster, Commented Apr 21, 2015 at 18:05
Use this getbootstrap.com/javascript/#carousel BootStrap 3 Carousel will do all of this for you. Implement Bootstrap's Carousel, then create an AJAX call that will load your images and dynamically create the needed HTML in your AJAX callback method upon SUCCESS callback/promise. — snowYetis
– snowYetis, Commented Apr 21, 2015 at 18:06
New to web development->tries to make a gallery of images. Go through the basics first please. It sounds harsh but that is my best advice. Learn html, css, javascript in that order. — Michelangelo
– Michelangelo, Commented Apr 21, 2015 at 18:06

Random Integer · Accepted Answer · 2015-04-21 18:18:14Z

1

There is no need of using "onclick" inside button tags.

<script type= "text/javascript">
   var counter = 2;
   var sourceUrl = "photos/" + counter + ".jpg";
   var prev = document.getElementById("prev");
   var next = document.getElementById("next");

    prev.onclick = function(){
        counter--;
        document.getElementById("currentImage").src = sourceUrl;    
    }
    next.onclick = function(){
        counter++;
        document.getElementById("currentImage").src = sourceUrl;        }

    if(counter == 3){
        counter = 0;
    };
</script>

edited Apr 21, 2015 at 18:18

answered Apr 21, 2015 at 18:13

Random Integer

1063 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tcigrand · Accepted Answer · 2015-04-21 18:09:46Z

As others have posted, you cannot use an int as a variable name.

You also had "onclick" events on each button and events set via jQuery, you just need one or the other.

Storing each src string in an array and accessing it by using "counter" will work for you. It will also allow you to use a variable amount of images.

HTML

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" class="portfolioNavigation">Previous</button>
 <button id= "next" class="portfolioNavigation">Next</button>

JavaScript

var counter = 0;
   var srcArray = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];

prev.onclick = function(){
        document.getElementById("currentImage").src = srcArray[--counter];
    }
next.onclick = function(){
        document.getElementById("currentImage").src = srcArray[++counter];
    }

if(counter == 3){
        counter = 0;
    };

If you inspect the image element in this JSFiddle, you'll see the src updating correctly.

hyde · Accepted Answer · 2015-04-21 18:07:05Z

There are couple of issues in your code right now. One of them is that your variables names are plain numbers. You cannot have variable names starting with numbers in JavaScript. Although not a great example, _1 is valid, image1 is a valid and even a more descriptive variable number.

Another issue is, when you are setting the src attribute of currentImage you are also setting that attribute to a value of plain number. That is not a valid image url.

You can put the photo URLs in an array and cycle through those images when next and previous buttons are pressed.

Try something like this (warning untested code):

var images = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];
var numImages = images.length;

prev.onclick = function(){
    document.getElementById("currentImage").src = images[(counter - 1) % numImages];
    counter--;
}

The significance of the % operator here is that it wraps around the value of [0, numImages).

Collectives™ on Stack Overflow

JavaScript Click images with button navigation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related