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
Solved

Javascript change images with button

Posted on 2013-01-15
3
438 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

840 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