Multiple Javascript slideshows on one page

I am trying to help a friend add two slide shows to her very simple website.

I am not skilled in javascript at all.

I have one working but need to know how to put a second slide show on the same page.
Here is the script I am using:


<script language="JavaScript">
var i = 0;
var path = new Array();

// LIST OF SLIDES
path[0] = "images/1.gif";
path[1] = "images/2.gif";
path[2] = "images/3.gif";
path[3] = "images/4.gif";
path[4] = "images/5.gif";

function swapImage()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",3000);
}
</script>


<body onLoad="swapImage()">

<img name="slide" height=200 width=400 src="1.gif">

Any help would be greatly appreciated. :slight_smile:

Thanks all,

Katt :kitty2:

Here is how the code can be grown to nicely achieve that.


function swapImage(id, path)
{
	var el = document.getElementById(id);
	el.count = el.count || 0;
	el.src = path[el.count];
    el.count = (el.count + 1) &#37; path.length;
}
function slideshow() {
    setInterval(function () {
		swapImage('slide1', [
			"images/1.gif",
			"images/2.gif",
			"images/3.gif",
			"images/4.gif",
			"images/5.gif"
		]);
		swapImage('slide2', [
			"images/a.gif",
			"images/b.gif",
			"images/c.gif",
			"images/d.gif"
		]);
	}, 3000);
}
onload = slideshow;


<img id="slide1" height="200" width="400" src="1.gif"></body>
<img id="slide2" height="200" width="400" src="a.gif"></body>

Thanks Paul :kiss: :cool:

this is a life and grade saver.

Have a great day :wink:

Katt :kitty:

Is there any way to add a Fade in Fade out option to this slideshow?..and still keep multiple slideshows on the page?

Andy

Yes there is, but using something like jquery or scriptaculous makes it a lot easier.

Could you provide any examples or thoughts on how to get this to work.

Andy

As a good exampe, here’s some slideshows using different effects with the jquery cycle plugin.

That works great, and simple too.

Now, how do you set it up so the slideshows can iterate at different speeds?

I am not very familiar with using the SetInterval function, in fact this is the first time I have seen it.

Nevermind Answered my own question. Pretty simple actually. For those who our interested…


        function slideshow()
        {
            setInterval(function ()
            {
                swapImage('slide1', [
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg",
                    "images/5.jpg"
                ]);
            }, 3000);
            setInterval(function ()
            {
                swapImage('slide2', [
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg"
                ]);
            }, 2000);
        }

If you want to know more about SetTimeout and SetInterval go here…
ww.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

(you will have to copy paste link and add a ‘w’ as well. It seems I am not cool enough to post real links on this forum yet)

Made a few more changes… Images fade in and out now.

<script type="text/javascript">

   // Swap Image with Fade Effect
   function swapImage(id, path)
   {
       var el = document.getElementById(id);
       el.count = el.count || 0;

       //Swap Images with Filter
       document.getElementById(id).style.filter="blendTrans(duration=3)"
       document.getElementById(id).filters.blendTrans.Apply()
       document.getElementById(id).filters.blendTrans.Play()
       document.getElementById(id).src = path[el.count];

        el.count = (el.count + 1) % path.length;
     }

     // Allows for Multiple Slides
     function slideshow()
     {
         setInterval(function ()
         {
             swapImage('slide1', [
                "images/1.jpg",
                "images/2.jpg",
                "images/3.jpg",
                "images/4.jpg",
                "images/5.jpg"
                ]);
          }, 5200);

          setInterval(function ()
          {
             swapImage('slide2', [
                "images/a.jpg",
                "images/b.jpg",
                "images/c.jpg",
                "images/d.jpg",
                "images/e.jpg"
              ]);
          }, 3900);
        }
    </script>

I am unable to get the fade in and fade out to work. Can you post your entire html page?

*EDIT Make sure the paths for your images are correct and the filters only work in IE.
You should probably set up error checking for other browsers. Theres a very simple to understand site
explaining all this here…

(w)ww.permadi.com/tutorial/jsImgTransition/index.html



<html>
<head>
<title>Example - SlideShow</title>

<script type="text/javascript">

// Swap Image with Fade Effect
function swapImage(id, path)
{
    //Swap Images with Filter
    var el = document.getElementById(id);
    el.count = el.count || 0;

    document.getElementById(id).style.filter="blendTrans(duration=3)"
    if (document.getElementById(id).filters && document.getElementById(id).filters[0])
    {
        document.getElementById(id).filters.blendTrans.Apply()
        document.getElementById(id).filters.blendTrans.Play()
        document.getElementById(id).src = path[el.count];

        el.count = (el.count + 1) &#37; path.length;
    }
}

// Allows for Multiple Slides
function slideshow()
{
    setInterval(function ()
    {
        swapImage('slide1', [
            "images/1.jpg",
            "images/2.jpg",
            "images/3.jpg",
            "images/4.jpg",
            "images/5.jpg"
        ]);
    }, 5200);

    setInterval(function ()
    {
        swapImage('slide2', [
            "images/5.jpg",
            "images/4.jpg",
            "images/3.jpg",
            "images/2.jpg",
            "images/1.jpg"
        ]);
    }, 3900);
}
</script>
</head>

<body onload="slideshow()">

    <img name="slide1" alt="" id="slide1" height="250" width="250" src="images/1.jpg" />
    <img name="slide2" alt="" id="slide2" height="250" width="250" src="images/5.jpg" />
</body>
</html>

Here is my code. It’s not working at all. Even rotating the images has stopped.

<html>
<head>
<title>Example - SlideShow</title>

<script type=“text/javascript”>

// Swap Image with Fade Effect
function swapImage(id, path, index)
{
//Swap Images with Filter
var el = document.getElementById(id);
el.count = el.count || 0;

document.getElementById(id).style.filter="blendTrans(duration=3)"
if (document.getElementById(id).filters && document.getElementById(id).filters[0])
{
    document.getElementById(id).filters.blendTrans.Apply()
    document.getElementById(id).filters.blendTrans.Play()
    document.getElementById(id).src = path[el.count];

    el.count = (el.count + 1) % path.length;
}

}

// Allows for Multiple Slides
function slideshow()
{
setInterval(function ()
{
swapImage(‘slide1’, [
“Files/1223804109_brand_samsonite.jpg”,
“Files/1223805842_hugoboss.jpg”,
“Files/1222941072_brand_rimowa.jpg”,
“Files/1223029324_cargolight.jpg”,
“Files/1222941072_brand_rimowa.jpg”
],[0,1,2,3,4]);
}, 5200);

setInterval(function ()
{
    swapImage('slide2', [
        "Files/1223804109_brand_samsonite.jpg",
        "Files/1223805842_hugoboss.jpg",
        "Files/1222941072_brand_rimowa.jpg",
		"Files/1223029324_cargolight.jpg",
        "Files/1222941072_brand_rimowa.jpg"
      ]);
}, 3900);

}
</script>
</head>

<body onload=“slideshow()”>

<table border=“0” cellspacing=“1” cellpadding=“1”>
<tr>
<td width=“216” height=“116” align=“center”><img name=“slide1” alt=“” id=“slide1” src=“Files/1223804109_brand_samsonite.jpg” /></td>
<td width=“216” height=“116” align=“center”><img name=“slide2” alt=“” id=“slide2” src=“Files/1223804109_brand_samsonite.jpg” /></td>
</tr>
</table>

</body>
</html>

The code you just posted works for me.

Make sure javascript is enabled,
You’re using Internet Explorer (I’m using IE7)
The image paths are correct.

Check the bottom left corner of your browser… you throwing in script errors?

ahhhh…Windows only. I’m on a mac so that’s why it isn’t working. Ok, no big deal, thanks!

I could not find this anywhere!
Its great, but it has a bug in IE that I can’t solve.
Once it finishes displaying all the images in the script, it shows the little “missing image icon with the red X” on the top-left corner.
I think it has something to do with the code trying, but being unable to complete the loop in IE.
I copied exactly the first code Paul posted.
Thanks Paul for the great code.

Hello, could someone please help me with adding Javascripts on 1 page in order to create mutlipal (manual) Slideshows. Every time I try to make these slideshows, once I start to add the code and place my images in it. It works! However!!..Once I add the same code a second time, to crate the same type of slide show but with different images. and I test it. Both Slideshows fail. Could someone PLEASE, help me with this. I would GREATLY appreciate it.
Thanks SO MUCH!!

Below is my code.


<head>
<script type="text/javascript">


var photos=new Array()
var photoslink=new Array()
var which=0


photos[0]="images/New Construction/newcon1.jpg"
photos[1]="images/New Construction/newcon2.jpg"
photos[2]="images/New Construction/newcon3.jpg"
photos[3]="images/New Construction/newcon4.jpg"
photos[4]="images/New Construction/newcon5.jpg"
photos[5]="images/New Construction/newcon6.jpg"
photos[6]="images/New Construction/newcon7.jpg"
photos[7]="images/New Construction/newcon8.jpg"
photos[8]="images/New Construction/newcon9.jpg"
photos[9]="images/New Construction/newcon10.jpg"

var linkornot=0


photoslink[0]=""
photoslink[1]=""
photoslink[2]=""



var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>
</head>

<td width="234" align="center" valign="top">New Construction<br><table width="66&#37;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="java script:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="58%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
<td width="42%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
</tr>
</table>

</td>
</tr>
<tr>
<td align="center" valign="top">Parking Lot Paving<br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="java script:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
<td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
</tr>
</table></td>

I had this problem and it turned out I had left a comma after the last image in that loop.
This thread is quite old but better late than never lol.

IT is ok
But how can i image fatch from database.

JavaScript does no communicate with databases. You will need to involve a server-side language such as PHP or ASP or .NET for that instead.