change img source by using an array

Question

I'm trying to change the source of an image with jQuery. I would like to fetch the new filepaths from an automatically created array. I have the code for the array, but I'm totally stuck trying to use the array in a function.

Here is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>




<script type="text/javascript">

//create an array that holds all image paths
var picArray = [];

for (var i =1; i <=20; i++) {  // 20 is the number of images
var elemvalue = "images/videoseq_" + format(i) + ".jpg";
picArray[i] = elemvalue;
//alert(picArray)
}

function format(n) { //this function simply adds leading zeros to filenames
n = n.toString(); 
var result;
if (n.length == 4) {result = "0" + n}
if (n.length == 3) {result = "00" + n}
if (n.length == 2) {result = "000" + n}
if (n.length == 1) {result = "0000" + n}
return result;
};
// end image path array creator code


//this function should insert the next imagepath in the array for the image with the class .changeImg
function rightButton(){
    var i;
    var imgPath = $("img .changeImg").attr("src", "picArray[i++]");
    //alert (imgPath);
};

function leftButton(){
    alert('helloleft')
};


//  });





</script>


</head>

<body>

<div id="container">
    <img class="changeImg" src="images/videoseq_00000.jpg" width="1280px" height="720px" />
    <div id="left" onclick="leftButton();"></div>
    <div id="right" onclick="rightButton();"></div>

</div> <!--video -->





</body>
</html>

var imgPath = $("img.changeImg").attr("src", picArray[i++]); you are assigning the string in src and not the value of picArray. double quotes will not be place in this line for your value. — Murtaza
– Murtaza, Commented May 18, 2012 at 11:28
remove quotes from picArray. It should look like var imgPath = $("img .changeImg").attr("src", picArray[i++]); — Mikolaj Kieres
– Mikolaj Kieres, Commented May 18, 2012 at 11:29
your jQuery selector for image tag should not have space it should be $("img.changeImg") — Murtaza
– Murtaza, Commented May 18, 2012 at 11:30
Thanks for clearing this part out! It is still not doing anything when I click on the div. If I alert imgPath I get [object, Object] and not a file path.. — Sony packman
– Sony packman, Commented May 18, 2012 at 11:34

Mathew Thompson · Accepted Answer · 2012-05-18 11:43:58Z

1

Two problems with your code, firstly, i doesn't have a value in your rightButton function, either pass it in or initialise it to a number you want (not sure what it's supposed to be)?

Secondly, your imgPath variable isn't needed and the JavaScript value is in quotes, see:

var imgPath = $("img.changeImg").attr("src", "picArray[i++]");

Change your rightButton code to be:

function rightButton(){
    var i = 0; //what should "i" be? Should it be global? I've just put 0 as a placeholder
    $("img.changeImg").prop("src", picArray[i++]);
}

edited May 18, 2012 at 11:43

answered May 18, 2012 at 11:32

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

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

5 Comments

Sony packman Over a year ago

Hi! I'm trying to create a slideshow that will change the image on click. I guess the "i" value should really represent the number of the current "slot" of the array so that if the user clicks on "forward" button the next image from the sequence will be loaded and if the user clicks on "back" button then the previous image will be loaded..

Mathew Thompson Over a year ago

Ah okay, then just make var i = 0 a global variable, then copy the above code for leftButton, but use picArray[i--] :)

Sony packman Over a year ago

Oh wow, no with your code it works! I almost want to cry, I tried this with so many things always messing up the syntax or logic somehow. There is one strange thing that still happnes though: when I first launch the webpage in Chrome, the right and left divs are not visible. But when I then reload, they become visible again and everything is working. Have this ever happened to you?

Mathew Thompson Over a year ago

LOL yeah it sounds like caching to be honest, make sure you refresh CTRL + F5 to load an uncached version of the page, otherwise strange things happen sometimes :)

Mathew Thompson Over a year ago

If it worked for you, please click the tick next to my answer :) thanks!

Collectives™ on Stack Overflow

change img source by using an array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related