• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 506
  • Last Modified:

Rotate images in different <td> at same time - javascript

I have two separate cells in a table.  Using Javascript I need to rotate 2 images per cell every 10 seconds.  

There are two images to go in the first cell and two different images in the next cell

EG
Right cell needs to loop through images Logo_1.gif and Logo_2.gif while in another cell I need to loop through Product1.gif and Product2.gif

Both cells should loop at the same time ideally using the same timer

hope this makes sense

thanks
0
wobbled
Asked:
wobbled
  • 2
  • 2
  • 2
1 Solution
 
sam2912Commented:
Try this..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=-1;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var image1 = new Array("img1_1.jpg", "img1_2.jpg", "img1_3.jpg"); // urls of first image
var image2 = new Array("img2_1.jpg", "img2_2.jpg", "img2_3.jpg"); // urls of second image
 
function rotateImages() {
	if(++i>image1.length) i=0;
	img1.src = image1[i];
	img2.src = image2[i];
	setTimeout(rotateImages, 10000);
}
</script>
</head>
 
<body onload="rotateImages();"> <!-- add onload event //-->
<td><img id="img1" src="" /></td> <!-- name the id of the two images "img1" and "img2" //-->
<td><img id="img2" src="" /></td>
</body>
</html>

Open in new window

0
 
abelCommented:
Go for the solution above, I was interrupted by my girlfriend, but I just have to show mine too. I think it is slightly easier to use, but that's just me...



<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        img { width: 300px; height:200px; }
    </style>
    <script type="text/javascript">
        function doOnload() {
            setTimeout("OnTimeOut();", 10000);
        }
 
        function OnTimeOut() {
            SwapPictures("rotateA1", "rotateA2");
            SwapPictures("rotateB1", "rotateB2");
            setTimeout("OnTimeOut();", 4000);
        }
        
        function SwapPictures(id1, id2) {
            var src1 = document.getElementById(id1).src;
            document.getElementById(id1).src = document.getElementById(id2).src;
            document.getElementById(id2).src = src1;
        }
    </script>
</head>
<body onload="doOnload()">
    <table>
        <tr>
            <td><img id="rotateA1" src="../images/people1.jpg" alt="people1" /></td>
            <td><img id="rotateA2" src="../images/people2.jpg" alt="people1"  /></td>
        </tr>
        <tr>
            <td><img id="rotateB1" src="../images/people3.jpg" alt="people1"  /></td>
            <td><img id="rotateB2" src="../images/people4.png" alt="people1"  /></td>
        </tr>
    </table>
    
</body>
</html>

Open in new window

0
 
wobbledAuthor Commented:
Dropping in the links to my images but the page displays nothing.  Looking at the source code and the src is blank.

I dropped in an alert but I do this is not appearing - the function appears not be getting called... any ideas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var i=-1;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var image1 = new Array("images/G-Spot_logo.gif", "images/G-Spot_logo_pink.gif"); // urls of first image
var image2 = new Array("images/main_dance.jpg", "images/main_dance_pink.jpg"); // urls of second image
 
function rotateImages() {
		alert 'test';
        if(++i>image1.length) i=0;
        img1.src = image1[i];
		
        img2.src = image2[i];
        setTimeout(rotateImages, 10000);
}
</script>
</head>
 
<body onload="rotateImages();"> <!-- add onload event //-->
<table>
<tr>
<td><img id="img1" src="" /></td> <!-- name the id of the two images "img1" and "img2" //-->
<td><img id="img2" src="" /></td>
</tr>
</table>
</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
abelCommented:
The alert is not coded properly, which is why you get an error (probably suppressed because of your browser settings). Change it to alert("test").

The urls you provided in the code of sam2912 are relative urls. That means that they must remain under a subdirectory (path) from your current link. If not, and the "images" part of the link starts at the root of your site, then prepend them with a "/", like this:

note, I didn't write that code, I'm just analyzing where the problem may be. Alternatively, you can also try my code, of course ;-)


var image1 = new Array("/images/G-Spot_logo.gif", "/images/G-Spot_logo_pink.gif"); // urls of first image
var image2 = new Array("/images/main_dance.jpg", "/images/main_dance_pink.jpg"); // urls of second image

Open in new window

0
 
sam2912Commented:
Haha, I coded the first part on the fly - I didn't get to test it, but the code below is definitely working - you just have to ensure the images are set correctly.

Based on my working (single) image slideshow script if you want a reference at:
http://www.samliew.com/Resources/Downloads/Programs/FolderImagesSlideshow/index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--
var images_1 = new Array(), images_2 = new Array();
var img_preload = new Array();
var slideshowDelay = 10; // in secs [3].. [10]
 
// Add relative image urls here
images_1.push("/images/G-Spot_logo.gif");
images_1.push("/images/G-Spot_logo_pink.gif");
// add more image 1 by copying the line above
 
images_2.push("/images/main_dance.jpg");
images_2.push("/images/main_dance_pink.jpg");
// add more image 2 by copying the line above
 
// preload images
for(i=0;i<images_1.length;i++) {
var img1 = new Image(); 
img1.src = ""+images_1[i];
 
var img2 = new Image(); 
img2.src = ""+images_2[i];
img_preload.push(img1, img2);
}
 
var num=-1; // don't change this value
function rotateImages() {
	if(images_1[++num]==undefined || images_2[num]==undefined) num++;
	if(num>images_1.length) num=0;
	alert(images_1[num]);
	document.getElementById("img1").src=images_1[num];
	document.getElementById("img2").src=images_2[num];
	setTimeout(rotateImages, (slideshowDelay*1000));
}
 
function init() {
	if(images_1.length!=0 && images_2.length!=0) {
		alert('Slideshow is starting!');
		rotateImages();
		alert('Slideshow has started!');
	}
}
//--></script>
</head>
 
<body onload="init();">
<td><img id="img1" src="" /></td> <!-- name the id of the two images "img1" and "img2" //-->
<td><img id="img2" src="" /></td>
</body>
</html>

Open in new window

0
 
wobbledAuthor Commented:
Absolutely spot on.  Many thanks for your help on this
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now