asked on

Javascript change images with button

Good afternoon expert,

Created image gallery. Would like to have buttons cycle through images .

Found this script.

Cant get it ro work. Cant see how the image file_number is being passed
to changeImage function.

There are four images named 'image1.jpg, image2.jpg, image3.jpg, and image4.jpg,

Thanks

Allen in Dallas

++++++++++++code begin++++++++++++
<html>
<head>
<title>Image Change</title>

<script language="JavaScript"</script>

<script language="JavaScript"></script>

</head>
<body>

<img src="image1.jpg" name="myimage">

<form>
<input type="button" value="<<" onClick='changeImage(-1);'>
<input type="button" value=">>" onClick='changeImage(1);'>
</form>

</body>
</html>

++++++++code end+++++++++++++++++++++++++

leakim971

check this test page : http://jsfiddle.net/z9vvW/

// AN ARRAY TO PUT ALL YOUR PICTURES URL
var ImageNames = [
  "http://i.imgur.com/RANDv.gif",
  "http://www.deviantart.com/download/322227392/toastie_gangnam_style_by_chocomilkterrorist-d5bug8w.gif",
  "http://www.deviantart.com/download/321169183/shadow_gangnam_style_by_chocomilkterrorist-d5b7rq7.gif",
  "http://img.photobucket.com/albums/v128/jeremyh/pony_gangnam_style_by_1n33d4hug-d5arai9.gif"
];

// CURRENT AND DEFAULT INDEX
var currentIndex = 0;

// WAIT LOADING OF THE PAGE BEFORE USING CONTROL INSIDE
window.onload = function() {
  // SET CLICK EVENT FOR THE "NEXT" BUTTON
  document.getElementById("next").onclick = new Function("changeImage(+1)");
  // SET CLICK EVENT FOR THE "PREVIOUS" BUTTON
  document.getElementById("prev").onclick = new Function("changeImage(-1)");
  // SET THE DEFAULT IMAGE, INDEX 0 BASED, SO THE FIRST IMAGE OF THE ARRAY
  changeImage(0);
}

	// SET AN IMAGE USING AN INDEX AND THE ARRAY ImageNames
	function changeImage(n) {
    // IF THIS IS NEXT BUTTON AND CURRENT INDEX IS GOING TO BE LOWER TO THE LENGTH OF THE ARRAY INCREASE currentIndex
    if(n>0&&(currentIndex+n<ImageNames.length)) currentIndex++;
    // ELSE IF THIS IS PREVIOUS BUTTON AND CURRENT INDEX GREATER THAN 0 (SO WE CAN DECREASE) DECREASE currentIndex
    else if(n<0&&currentIndex>0) currentIndex--;
    // SET src ATTRIBUTE OF THE IMAGE WITH THE IMAGE USING THE ARRAY AND CURRENT INDEX
    document.getElementById("myimage").setAttribute("src", ImageNames[currentIndex]);
  }

Open in new window

leakim971

source of the page :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='/js/lib/dummy.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    
  </style>
  


<script type='text/javascript'>//<![CDATA[ 

var ImageNames = [
  "http://i.imgur.com/RANDv.gif",
  "http://www.deviantart.com/download/322227392/toastie_gangnam_style_by_chocomilkterrorist-d5bug8w.gif",
  "http://www.deviantart.com/download/321169183/shadow_gangnam_style_by_chocomilkterrorist-d5b7rq7.gif",
  "http://img.photobucket.com/albums/v128/jeremyh/pony_gangnam_style_by_1n33d4hug-d5arai9.gif"
];

var currentIndex = 0;

window.onload = function() {
  document.getElementById("next").onclick = new Function("changeImage(+1)");
  document.getElementById("prev").onclick = new Function("changeImage(-1)");
  changeImage(0);
}

  function changeImage(n) {
    if(n>0&&(currentIndex+n<ImageNames.length)) currentIndex++;
    else if(n<0&&currentIndex>0) currentIndex--;
    document.getElementById("myimage").setAttribute("src", ImageNames[currentIndex]);
  }

//]]>  

</script>


</head>
<body>
  <img id="myimage">
<form>
  <input type="button" value="<<" id="prev" />
  <input type="button" value=">>" id="next" />
</form>
  
</body>


</html>

Open in new window

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial