Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Use only javascript to cycle through images

Posted on 2012-04-02
4
Medium Priority
?
373 Views
Last Modified: 2012-04-03
Greetings,

I'm trying to get the following code to work, but I keep getting a ton of undefined errors when it comes to the array imageCount.  

I'm trying to write this so it will be handle any number of images.

Please let me know where I'm going wrong and why.

<!DOCTYPE HTML>
<html>
<body onload="init()">

<div id="slideshow">
  <div class="image"><img src="myimage1.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage2.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage3.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage4.jpg"></div>
</div>

<script>
// all your Javascript code goes here //
function init() {
	setInterval("showImages()", 2000);
}
function showImages(){ 
var image = document.getElementsByTagName('img').length;
	var index = 0;
	var imageCount = new Array();
	for( var i = 0; i < image; i++){
		if(image != 0){
			imageCount.push(document.getElementsByTagName('img')[i]);
			imageCount[i].style.display = 'none';
			imageCount[index].style.display ='none';
			index = (index + 1)% imageCount[index].length;
			imageCount[i].style.display = 'block';	
		}
	}
}
</script>

</body>
</html>

Open in new window

0
Comment
Question by:max7
[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
  • 2
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37799426
Not quite clear on what you want to do - show one image at a time?

This is for sure not correct
imageCount[index].length;

there is nothing with length in the array...

Here is the beginning of your script, somewhat optimised

function init() {
  setInterval(showImages, 2000); // using quotes creates an implicit eval - not best practice
}

function showImages(){
  var images = document.getElementsByTagName('img'); // or document.images
  for (var i=0, n=images.length; i<n; i++) {

If the idea is to show one and hide the previous, then I would do - notice the usage of onload

<!DOCTYPE HTML>
<html>
<head>
<script>
var index=0,images; // global vars
window.onload=function() {
  images = document.getElementsByTagName('img'); // or document.images
  setInterval(showImages, 2000);
}
function showImages(){ 
   images[index].style.display='none'
   index++;
   if (index>=images.length) index=0;
   images[index].style.display = 'block';  
}
</script>
</head>
<body>

<div id="slideshow">
  <div class="image"><img src="myimage1.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage2.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage3.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage4.jpg"></div>
</div>



</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:max7
ID: 37799679
Not quite clear on what you want to do - show one image at a time?

Exactly what I want to do

This is for sure not correct
imageCount[index].length;

there is nothing with length in the array...

Correct, but I couldn't figure out why not since I thought the following code would put the img elements inside that array:

var imageCount = new Array();
	for( var i = 0; i < image; i++){
		if(image != 0){
			imageCount.push(document.getElementsByTagName('img')[i]);

Open in new window


Is the problem that I didn't correctly write my for loop?  I ask because I see that you did:

 for (var i=0, n=images.length; i<n; i++)

Open in new window


at best, I think would have done i<images.length; but I don't think I ever would have thought of n here.  I thought i would represent the image elements ... what am I missing?  

Also, comparing your script to mine, is creating a new array and putting the image elements inside of it even necessary?  I thought it was but it appears not.

I noticed too that in your script, you used global variables ... is that at least part of the reason I was getting undefined script errors?

If the idea is to show one and hide the previous, then I would do - notice the usage of onload

Two things:

a) unless I remove the surrounding div tags around the img tags, your script will only show the first image and none of the others.  How can I keep those div tags and still have it work?

b) you pointed out onload ... is that a better choice than init and if so, why?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 37799722
Sorry, Early morning

I rewrote the for loop to be more efficient - yours were in principle correct but not needed there.
I use window.onload because it is best practice to not clutter the html with inline javascript.

Here is a better version that hides the divs instead of images


<!DOCTYPE HTML>
<html>
<head>
<script>
var index=0,imageDivs=[]; // global vars
window.onload=function() {
  divs = document.getElementsByTagName('div'); 
  for (var i=0,n=divs.length;i<n;i++) {
    if (divs[i].className=="image") imageDivs.push(divs[i]);
  }
  setInterval(showImages, 2000);
}
function showImages(){ 
   imageDivs[index].style.display='none'
   index++;
   if (index>=imageDivs.length) index=0;
   imageDivs[index].style.display = 'block';  
}
</script>
</head>
<body>

<div id="slideshow">
  <div class="image"><img src="myimage1.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage2.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage3.jpg"></div>
  <div class="image" style="display:none"><img src="src="myimage4.jpg"></div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:max7
ID: 37799829
Thanks very much for your help, yet again.  Good to know you're still on EE, have a wonderful day :)
0

Featured Post

Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

705 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