Solved

Javascript change images with button

Posted on 2013-01-15
3
431 Views
Last Modified: 2013-01-16
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"<!--
ImageNames = new Object();
ImageNames.length = 3; //Because arrays start at 0, the length is one
                        //less than the number of images.
for (counter = 0; counter < 4; counter++) {
    file_number = counter + 1;
    file_name = ("image" + file_number + ".jpg");
    ImageNames[counter] = file_name;
}
//--></script>

<script language="JavaScript"><!--
which_image_loaded = 0;

function changeImage(direction) {
    which_image_loaded += direction;
    if (which_image_loaded < 0)
        which_image_loaded = 3;  //Again, one less than the actual number of images.
    if (which_image_loaded > 3)
    which_image_loaded = 0;
    if (document.images)
        document.myimage.src = ImageNames[which_image_loaded];
}
//--></script>

</head>
<body>
<!--http://www.irt.org/articles/js132/-->
<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+++++++++++++++++++++++++
0
Comment
Question by:9apit
  • 2
3 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38780860
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38780897
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

0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 38780919
This is what I had to do to get your script to work without errors.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Change</title>
<script type="text/javascript">
<!--
var ImageNames = new Array();
ImageNames.length = 4; //Because arrays start at 0, the length is one
                        //less than the number of images.
var counter;
var file_number;
var file_name;
for (counter = 0; counter < 4; counter++) {
    file_number = counter + 1;
    file_name = ("Image" + file_number + ".jpg");
    ImageNames[counter] = file_name;
}

var which_image_loaded = 0;

function changeImage(direction) {
    which_image_loaded += direction;
    if (which_image_loaded < 0) which_image_loaded = 3;  //Again, one less than the actual number of images.
    if (which_image_loaded > 3) which_image_loaded = 0;
    if (document.images) document.myimage.src = ImageNames[which_image_loaded];
}
//-->
</script>

</head>
<body>
<!--http://www.irt.org/articles/js132/-->
<img src="Image1.jpg" name="myimage">

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

</body>
</html>

Open in new window

0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question