how to change image in JavaScript using an array of image sources

Question

here is my html code:

var picList = ["http://www.acidre.com/dummy/16:9x1080", "http://www.nexusnetsolutions.com/image/product.png", "http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png"];

 function nextPic() {
   var cur = 0;
   var f = 0;
   var x = document.getElementById("pics").src;
   for (cur = 0; cur < picList.length; cur++) {
     if (x == picList[cur]) {
       f = 1;
       break;
     }
   }
   if (f == 1) {
     if (cur < picList.length - 1) {
       document.getElementById("pics").src = picList[cur + 1];
     }
   }
 }

 function prevPic() {
   var cur = 0;
   var f = 0;
   var x = document.getElementById("pics").src;
   for (cur = 0; cur < picList.length; cur++) {
     if (x == picList[cur]) {
       f = 1;
       break;
     }
   }
   if (f == 1) {
     if (cur > 0) {
       document.getElementById("pics").src = picList[cur - 1];
     }
   }
 }

header {
  position: absolute;
  display: block;
  background: cyan;
  height: 150px;
  width: 1350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
  color: white;
  position: absoute;
  padding-left: 450px;
  padding-top: 15px;
  font-family: 'Cabin', sans-serif;
  font-size: 50px;
  font-variant: small-caps;
}
#pics {
  margin-top: 170px;
  margin-left: 270px;
}
#bnext {
  position: absolute;
  margin-left: 100px;
  margin-top: 400px;
  width: 80px;
}
#bprev {
  position: absolute;
  margin-left: -980px;
  margin-top: 400px;
  width: 80px;
}

<header>
  <h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button" onclick="nextPic()">Next</input>
  <button id="bprev" type="button" onclick="prevPic()">Previous</input>

nothing is happening on clicking the next and previous buttons. cant understand why.. would be very helpful if anyone gives a solution

If your question is answer please mark the correct one

Weedoze
– Weedoze

2016-10-18 11:59:49 +00:00
Commented Oct 18, 2016 at 11:59 — Weedoze
– Weedoze, Commented Oct 18, 2016 at 11:59

Oyewunmi Joseph · Accepted Answer · 2016-10-14 09:52:37Z

Why would you want to check for the images source?

if (x == picList[cur]) {
   f = 1;
   break;
 }

and I can't see where u changed your image, except on some conditions:

 if (cur ...) {
   document.getElementById("pics").src = ...;
 }

All this are not needed. U only need to switch images based on the array content and add your conditions to safeguard against 'undefined' array index.

Here is a simple working sample code:

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button">Next</input>
  <button id="bprev" type="button">Previous</input>

<script>
(function(){
 var images = ["http://www.w3schools.com/images/w3schoolscom_gray.gif", "none"];
 var index = 0;
 function prevImage() {
  index--;
  index = index < 0 ? 0 : index;
  return images[index];
 }

 function nextImage() {
  index++;
  index = index >= images.length ? images.length - 1 : index;
  return images[index];
 }

 document.querySelector("#bprev").onclick= function() {
  document.querySelector("#pics").src = prevImage();
 }

 document.querySelector("#bnext").onclick= function() {
  document.querySelector("#pics").src = nextImage();
 }

})();

</script>
</body>
</html>

Weedoze · Accepted Answer · 2016-10-14 07:35:46Z

var picList = ["http://allwebco-templates.com/support/picts/sample-image.jpg",
  "http://mfs1.cdnsw.com/fs/cc0/normal/cx0ms-193.jpg",
  "https://freethumbs.dreamstime.com/114/big/free_1145336.jpg",
  "http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg"
];

var currentIndex = 0;
var pic = document.getElementById("pics");

function nextPic() {
  pic.src = picList[(currentIndex++) % picList.length];
}

function prevPic() {
  if (currentIndex == 0)
    currentIndex = picList.length - 1;
  else
    currentIndex = currentIndex - 1;

  pic.src = picList[currentIndex];
}

header {
  position: absolute;
  display: block;
  background: cyan;
  height: 150px;
  width: 1350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
  color: white;
  position: absoute;
  padding-left: 450px;
  padding-top: 15px;
  font-family: 'Cabin', sans-serif;
  font-size: 50px;
  font-variant: small-caps;
}
#pics {
  margin-top: 170px;
  margin-left: 270px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Image Showcase</title>
  <link rel="stylesheet" type="text/css" href="imgShow.css"></link>
  <script src="imgShow.js"></script>
</head>

<body>
  <header>
    <h1>Image Showcase</h1>
  </header>
  <img id="pics" src="http://allwebco-templates.com/support/picts/sample-image.jpg" alt="Forms" width="300px" height="200px" /></img>
  <button id="bnext" type="button" onclick="nextPic()">Next</input>
    <button id="bprev" type="button" onclick="prevPic()">Previous</input>
</body>

</html>

Vibhesh Kaul · Accepted Answer · 2016-10-14 07:46:38Z

0

The Html for you button is incorrect,change it to .

<button id="bnext" type="button" onclick="nextPic()">Next</button >
<button id="bprev" type="button" onclick="prevPic()">Previous</button>

edited Oct 14, 2016 at 7:46

answered Oct 14, 2016 at 7:21

Vibhesh Kaul

2,6211 gold badge24 silver badges39 bronze badges

3 Comments

Weedoze Over a year ago

This will generate an error when cur == picList.length - 1

Vibhesh Kaul Over a year ago

@Weedoze I dont think so, could you enlighten how?

Weedoze Over a year ago

Oh you are just replacing inside his code ? I did not see that he was handling the code when you hit the last/first item

bullzito · Accepted Answer · 2016-10-14 08:43:15Z

Here is an example to do this in a slightly different way. One thing is that I removed the invocation back in JS file instead of calling the prevPic() nextPic() inline.

JS

var picList = [
        'http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg',
        'http://pre15.deviantart.net/39b2/th/pre/i/2012/221/3/3/square_2_by_lilith1995-d5ag32b.jpg',
        'http://img15.deviantart.net/4e63/i/2010/188/6/c/fly__fly_away___sqaure_crop_by_tagirocks.jpg',
        'http://img13.deviantart.net/036f/i/2016/287/c/3/harley_quinn_by_mz09-dakslb5.jpg',
    ];


function imageShowCase(list) {

    var cur = 0;
    var img = document.getElementById('pics');

    /* Use controls element to delegate from buttons */
    var controls = document.getElementById('controls');

    /* Update the image src */
    var update = function(index) {
        img.src = list[index];
    };

    /* Count up on the current index, reset to 0 if reaced the total length of array */
    var next = function() {
        cur = (cur < list.length - 1) ? (cur + 1) : 0;
    };

    /* Count down, reset to length of array, minus 1 */
    var prev = function() {
        cur = (cur === 0) ? (cur = list.length - 1) : cur - 1;
    };

    /* Delegate to the controls elememt */
    controls.addEventListener('click', function(e) {

        /* Stop any event bubling */
        e.stopPropagation();

        /* Check which element was clicked by comparing IDs */
        if      (e.target.id === 'bnext') { next(); }
        else if (e.target.id === 'bprev') { prev(); }
        else { return; }

        /* Render the image with new src */
        update(cur);

    }); 
}

imageShowCase(picList);

CSS

header{
    display: block;
    background: cyan;
    height: 150px;
    width: 1350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1{
    color: white;
    position: absoute;
    padding-left: 450px;
    padding-top: 15px;
    font-family: 'Cabin', sans-serif;
    font-size: 50px;
    font-variant: small-caps;
}

.wrapper {
    margin: 0 auto;
    max-width: 400px;
}

#pics{
    width: 100%;
}

#bnext{
    width: 80px;
}
#bprev{
    width: 80px;
}

HTML

<header>
    <h1>Image Showcase</h1>
</header>
<div class="wrapper">
    <div id="controls">
            <button id="bprev" type="button">Previous</button>
            <button id="bnext" type="button">Next</button>
    </div>
    <br>
    <img id="pics" src="http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg"/>
</div>

Collectives™ on Stack Overflow

how to change image in JavaScript using an array of image sources

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related