Rotating Image Side by Side, Rotating Images appear on seperate lines on webpage wasting so much sp Options

[cassyleeripper]

Hello and thank you for your time!

I have a webpage and I'm looking to add a sort of Product Slideshow at the top of my page.

It seems all of the HTML Rotating images I could find that work with my simple online shop HTML limitations are only singles. I am looking to have a row of them side by side, 3-4 with multiple pictures changing every few seconds for each of them.

The problem is, every time I try to edit the code myself to attempt to have a couple of the rotating images in a row, they go annoyingly on the next line, creating more than half a page of wasted space when I'm trying to have as many products in view on the front page as possible. (Without looking like the Dollar Store!)

Please note that I have only added two images in rotation at this time. I know enough about the code to be able to add in more as I please as well as to find and edit the second set of images if someone would be so kind as to accomplish what I've been attempting to for the past five hours!! Sheesh! lol.

I am using this code and it's working fine:

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://images6.cpcache.com/product/627482576v1_240x240_Front_Color-BlackWhite.jpg", "http://www.cafepress.com/weddingswag.627482576", "Best Sellers! Click to view."];
theimage[1]=["http://images0.cpcache.com/product/627482580v3_240x240_Front.jpg", "http://www.cafepress.com/weddingswag.627482580", "Best Sellers! Click to view."];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set the first slide
SetSlide(0);

//autoplay
PlaySlide();
}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>

</table>

</form>
<!-- end of slide show HTML -->

[pandy]

You could float the forms left maybe.

I know it isn't your fault, but I have to say that this use of a form is a little icky.