?
Solved

Javascript change images with button

Posted on 2013-01-15
3
Medium Priority
?
457 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

770 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