Solved

Javascript change images with button

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

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now