Geekpedia Tutorials Home

Building a C# Chat Client and Server

Building a C# Chat Client and ServerA step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

Getting Hard Drive InformationA C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

UPS Shipping CalculatorThis tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Create Your Own Rich Text EditorCreating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials
Search
Tutorials
Programming Tutorials
IT Jobs
From CareerBuilder
Geekpedia » JavaScript Tutorials » Slideshow and transition effects using JavaScript

Slideshow and transition effects using JavaScript

Learn how to create a slideshow using JavaScript. It will feature next, previous, play, pause and resume buttons along with transition effects between pictures.

 On Friday, March 9th 2007 at 02:38 PM
By Sorin Sodolescu (View Profile)
*****   (Rated 4.5 with 24 votes)
Contextual Ads
More JavaScript Resources
Advertisement
JavaScript Slideshow

Sample See this code in action

First let's create the HTML elements that we will use for the slideshow. We need an image, four buttons and two divs:

<html>
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
</center>
</body>
</html>

We will use the img tag to display the pictures in the slideshow. The image is wrapped inside a div, which has a filter CSS atribute. That filter will create the transition effect using DirectX; unfortunately browsers other than Internet Explorer do not support the DirectX filters applied here. The slideshow will still work, however there will be no transition effect between pictures. We could have declared the filter in the image tag instead of the div, then the transition would not work in Firefox at all. We also have four buttons for controlling the slideshow and another div that will display text (such as the title of the image).
Let's move on to the script. First, we declare a few variables and make a function that preloads the pictures.

<script language="javascript" type="text/javascript">
<!--
   var i=0;
   var finished=false;
   var paused=false;
   var running=false;

   function loadPics()
   {
      pic0=new Image();
      pic0.src="1.jpg";
      pic1=new Image();
      pic1.src="2.jpg";
      pic2=new Image();
      pic2.src="3.jpg";
      pic3=new Image();
      pic3.src="4.jpg";
      pict=new Array();
      pict[0]=pic0.src;
      pict[1]=pic1.src;
      pict[2]=pic2.src;
      pict[3]=pic3.src;
   }

This function preloads the images and makes an array with them. We want this function to be called when the pages loads, so the body tag has the event: onload="loadPics()".

Now, we'll write a function for the next button. The default picture is pict0 (1.jpg), so what we want is the image to display the next picture when we click next, and to display the first picture if we are at the end of the slideshow. For this function we'll use the i variable, which is basicly the current picture, and an IF ELSE statement.

   function next()
   {
      finished=false;
      if(i<pict.length-1)
      {
      i++;
      document.getElementById('picture').src=pict[i];
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
      i=0;
      document.getElementById('picture').src=pict[i];
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

You can see the finished variable, that's there for the slideshow function, and will be explained later.
So, this is how this function works: when you click next, it checks what picture is currently displayed; if the picture is any other than the last one, i will be incremented by 1, the next picture will be displayed and the pictures' name will be written in a div. If the last picture was displayed when the button was clicked, i will become 0, and the first picture will be displayed.

The prev function is pretty much the same. The difference is that the IF ELSE statement checks if the current picture is the first one. If the current picture is not the first picture, then the previous picture will be displayed, if it is the first picture, the last picture in the slideshow will be displayed.

   function prev()
   {
      finished=false;
      if (i>0)
      {
         i--;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=pict.length-1;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

The autoslideshow is next. First we'll create a function that will call the actuall slideshow function at a certain interval. Also, because the transition does not work in Firefox, we'll have to check the browser to see what function to call (there's one for IE, and another one for the rest of the browsers).

   function startSlide()
   {
      running=true;
      if(navigator.appVersion.indexOf("MSIE") == -1)
      {
         interval = setInterval(FFSlideshow,5000);
      }
      else
      {
         interval = setInterval(slideshow,5000);
      }
      document.getElementById("slideshow").disabled=true;
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
   }

The running variable shows that a slideshow is in progress, and it will be usefull for the pause function.
So, if the browser is IE, the slideshow function will be called after 5 seconds, if not, the FFSlideshow function will be called.

   function slideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         document.getElementById("slideshow").disabled=true;
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false;
         clearInterval(interval);
      }
      else
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
   }

When this function is called it checks what is the current picture. If it's any other than the last one, it will display the next picture, starting with a nice fade effect. i will be incremented by 1, and the startSlide function will call this function again after 5 seconds. This will go on until the last picture is displayed, then the timer will be cleared and the function will not be called again; finished will become true and running will become false. If the slideshow is started again, the current picture will be the last one and finished will not be false, so the code in the else body will be ran; the slideshow will go on until it reaches the last picture again: the timer will call this function until it's been cleared again. I have used setInterval() instead of setTimeout() because it can be cleared, and this will prevent the slideshow from running more than desired (if you use setTimeout and pause the slideshow twice during the same picture, the slideshow will run twice).

The FFSlideshow function is the same, except it doesnt have filters (that makes Firefox not run the script).

   function FFSlideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById("slideshow").disabled=true;
         i++
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false
         clearInterval(interval);
      }
      else
      {
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

Finally it's time to write the pause function. We dont want to pause the slideshow when it's not even running. So we have the running variable above that helps us know if the slide is running or not. We also want to resume the slideshow after it's been paused, for this we have the paused variable above.

   function pause()
   {
      if(running==true)
      {
         if(paused==false)
         {
            paused=true;
            document.getElementById("pause").value="resume";
            clearInterval(interval);
            document.getElementById('number').innerHTML="Paused";
         }
         else
         {
            startSlide()
            paused=false;
            document.getElementById("pause").value="pause";
         }
      }
   }

When the pause button has been clicked the function checks if a slideshow is running. If it's not, then the function will do nothing. If a slideshow is running, it checks if it has been paused or not. If it hasn't been paused, the function will pause the slideshow by clearing the setInterval. The button will say "resume" now and a div will say "Paused". The paused variable is now true. So when the function is called again, it will run the other piece of code: it will call the startSlide() function (that will start a timer and call the slideshow function), will make the button say "pause" again and the paused variable will again be false.

And don't forget to close the script:

//-->
</script>

You can copy the whole code from below and have the gallery up & running:

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
   var i=0;
   var finished=false;
   var paused=false;
   var running=false;
   function loadPics()
   {
      pic0=new Image();
      pic0.src="1.jpg";
      pic1=new Image();
      pic1.src="2.jpg";
      pic2=new Image();
      pic2.src="3.jpg";
      pic3=new Image();
      pic3.src="4.jpg";
      pict=new Array();
      pict[0]=pic0.src;
      pict[1]=pic1.src;
      pict[2]=pic2.src;
      pict[3]=pic3.src;
   }
   function next()
   {
      finished=false;
      if(i<pict.length-1)
      {
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=0;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }
   function prev()
   {
      finished=false;
      if (i>0)
      {
         i--;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=pict.length-1;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

   function startSlide()
   {
      running=true;
      if(navigator.appVersion.indexOf("MSIE") == -1)
      {
         interval = setInterval(FFSlideshow,5000);
      }
      else
      {
         interval = setInterval(slideshow,5000);
      }
      document.getElementById("slideshow").disabled=true;
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
   }
   function slideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         document.getElementById("slideshow").disabled=true;
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false;
         clearInterval(interval);
      }
      else
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
   }
   function FFSlideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById("slideshow").disabled=true;
         i++
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false
         clearInterval(interval);
      }
      else
      {
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }
   function pause()
   {
      if(running==true)
      {
         if(paused==false)
         {
            paused=true;
            document.getElementById("pause").value="resume";
            clearInterval(interval);
            document.getElementById('number').innerHTML="Paused";
         }
         else
         {
            startSlide()
            paused=false;
            document.getElementById("pause").value="pause";
         }
      }
   }
//-->
</script>
</head>
<body onload="loadPics()">
   <center>
      <div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
         <img id="picture" name="picture" src="1.jpg" /></div><br />
         <input id="prev" type="button" value="prev" onclick="prev()" />
         <input id="next" type="button" value="next" onclick="next()" />
         <input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
         <input id="pause" type="button" value="pause" onclick="pause()" /><br />
      <div id="number">Picture 1</div>
   </center>
</body>
</html>
Digg Digg It!     Del.icio.us Del.icio.us     Reddit Reddit     StumbleUpon StumbleIt     Newsvine Newsvine     Furl Furl     BlinkList BlinkList

Rate Rate this tutorial
Comment Current Comments
by JE on Thursday, April 26th 2007 at 02:13 AM

Thanks for this. Searched high and low for a script that would work, and this one does that and more. Cheers. JE.

by Sorin Sodolescu on Thursday, April 26th 2007 at 04:51 AM

Hi JE. Glad you find it useful.

by Sirio on Friday, May 4th 2007 at 06:30 AM

Really cool, I used it for my slideshow effect, with some modifications.
I also combined the NEXT function with SLIDESHOW, since they basically do the same things.
Now I'm gonna find something to add transition effect on FireFox.

by Sorin Sodolescu on Friday, May 4th 2007 at 11:37 AM

Hello Sirio. You should post your FireFox effect fix here, it would be a nice improvement to the script.

by Ron on Monday, June 4th 2007 at 10:37 PM

Thanks, this is great but I am having trouble in IE7. The slide show will not work. When I debug I get the following message.......

document.getelementById(...).filters.0 is null or not an object

Any ideas?

by Ron on Monday, June 4th 2007 at 10:41 PM

Forget it...I got it.....Thanks again!

by syed rafeeq on Monday, September 3rd 2007 at 10:23 AM

i want the programme

by rash on Thursday, September 6th 2007 at 02:22 PM

Great program dude.. Everything works except for the pictures that are being displayed. any help

by Sorin Sodolescu on Thursday, September 6th 2007 at 02:30 PM

Hi rash

That is strange and should not happen. All I can tell you is to check that the paths to the images are correct. Also be sure that the array contains all the images.

I hope you'll sort it out. Good luck!

by rash on Thursday, September 6th 2007 at 06:10 PM

I got it preciate the help

by kyle on Monday, September 10th 2007 at 10:40 PM

Love the program.

is there a way to modify it so the pictures don\'t they don\'t have to be the exact same dimensions for each slide? right now, if i have a horizontal picture followed by a vertical, it stretches the vertical into the horizontal space. any suggestions or is that not going to happen with this show? Thanks.

by Sorin Sodolescu on Tuesday, September 11th 2007 at 12:49 PM

Hi Kyle

First of all I have to say that the script works with pictures of different sizes, I've just tested it myself to be sure.
All I can do is to suggest you check that the img tag doesn't have a fixed width. In the tutorial you can see that a div has "width:560px", please make sure that you don't specify the width of the img.
Hope this will be helpful.

by kyle on Thursday, September 13th 2007 at 10:55 PM

thanks. got it. it's always the little things, isn't it?

by Kadrus on Friday, September 14th 2007 at 02:21 PM

Isn\'t it much easier to write this?
<html>
<head>
<script type=\"text/javascript\">
myImages=new Array()
myImages[0]=\"example.gif\"
myImages[1]=\"example2.gif\"
myImages[2]=\"example3.jpg\"
myImages[3]=\"example4.gif\"
myImages[4]=\"example5.gif\"
myImages[5]=\"example6.gif\"
imagecounter=myImages.length-1
i=0

function first()
{
document.getElementById(\'imageviewer\').src=myImages[0]
i=0
}

function previous()
{
if (i>0)
{
i--
document.getElementById(\'imageviewer\').src=myImages[i]
}
}

function next()
{
if (i<imagecounter)
{
i++
document.getElementById(\'imageviewer\').src=myImages[i]
}
}

function last()
{
document.getElementById(\'imageviewer\').src=myImages[imagecounter]
i=imagecounter
}
</script>
</head>

<body>
<center>
<form>
<input type=\"button\" value=\"First\" onclick=\"first()\">
<input type=\"button\" value=\"Previous\" onclick=\"previous()\">
<input type=\"button\" value=\"Next\" onclick=\"next()\">
<input type=\"button\" value=\"Last\" onclick=\"last()\">
</form>
<img id=\"imageviewer\" src=\"exmple.gif\" alt=\"w3Scools\" width=\"100\" height=\"30\" />
</center>
</body>
</html>



by Sorin Sodolescu on Friday, September 14th 2007 at 02:48 PM

Hi Kadrus.

Your code is simpler and works great, but doesn't do what my code doest - they're two different scripts. Let me point out some differences:
- your code doesn't have a slideshow with a transition effect
- doesn't have a pause/play button (function)
- in your code if you reach the last image and click next nothing happens, in my code the first picture is displayed
- the same thing for the first image and the previous button.

So, you are right, your script is simpler, but there's no point in comparing the scripts because they don't do the same things.

by maria on Friday, October 5th 2007 at 12:07 AM

Hi Sorin - Your slideshow lookds great!


Do you think it would it be possible to include thumbnails on your slideshow? - These thumbnails would show their respective images on mouse click. If possible it would be greatly appreciated.

maria

by Sorin Sodolescu on Friday, October 5th 2007 at 07:34 AM

Hi Maria

I'm glad you like the slideshow. It is possible to include thumbnails, and there are many ways of doing that. Here is an easy solution for what you need:
- keep the curent code, and edit it as follows:
- below the number div, create another div that will include the thumbnails. It would looke something like this
<div id="thumbs">
<img id="1.jpg" height="50" onClick="showThumb(this.id)" /> <img id="2.jpg" height="50" onClick="showThumb(this.id)" /> <img id="3.jpg" height="50" onClick="showThumb(this.id)" /> <img id="4.jpg" height="50" onClick="showThumb(this.id)" />
</div>
-the tumbnails are image tags, without the src attribute.
- now edit the loadPics() function, so the img tags in the div have sources:
function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
for (i=0;i<pict.length;i++)
{
j=i+1;
document.getElementById(j+".jpg").src=pict[i];
}

}
- The edited part is that little for loop.
- As you've seen earlier, the imgs will call the new showThumb() function when clicked. That function looks like this:
function showThumb(x)
{
document.getElementById("picture").src=x;
}
And that's about it, when you click on a thumbnail, the actual picture will be displayed.
In this example I've hardcoded the img elements, but you can write a script to dynamically create them and set their id. You also have to be carefull when setting the id, because if you put a wrong format in there, the picture won't load at all. (For example, if you put 1.gif, the script will try to load that picture, but you only have .jpgs in this example).
I hope you'll find this helpful Maria.

by Maria on Saturday, October 6th 2007 at 12:21 AM

Hi Sorin -

When I hard coded the script you provided, it worked just fine - it was great to see it working.

<div id="thumbs">
<img src="thumb1.jpg" id="1.jpg" onClick="showThumb(this.id)" />
<img src="thumb2.jpg" id="2.jpg" onClick="showThumb(this.id)" />
<img src="thumb3.jpg" id="3.jpg" onClick="showThumb(this.id)" />
<img src="thumb4.jpg" id="4.jpg" onClick="showThumb(this.id)" />
</div>

However, I encountered problems when I tried to retrieve the thumbnails dynamically. How do I call the onClick="showThumb(this.id)" inside document.write?

[JAVASCRIPT code]

var thumb=new Array()
thumb[0] = ["thumb1.jpg"];
thumb[1] = ["thumb2.jpg"];
thumb[2] = ["thumb3.jpg"];
thumb[3] = ["thumb4.jpg"];


function thumbs(){

for (index = 0; index < thumb.length; index++)

document.write('<img src="' + thumb[index] + '" id="' + (index + 1) + '.jpg"' + 'onclick="' + ????? + ' />');
}


======

[HTML code]

<div id="thumbs">
<script type="text/javascript">
thumbs();
</script>
</div>


Thank you,
Maria

by Sorin Sodolescu on Saturday, October 6th 2007 at 06:07 AM

Hi Maria

First of all, I have to say that you were on the right track with your code.
Secondly, you don't need the img Id and id argument in the function in this dynamic version. To make your script work, please edit your code to this:
- Your thumbs function should look like this (I've used my own variables, but I think you'll understand what I mean):
var picz = new Array();
picz[0] = "1.jpg";
picz[1] = "2.jpg"
picz[2] = "3.jpg"
picz[3] = "4.jpg"
for (i=0;i<picz.length;i++)
{
document.write("<img src='"+picz[i]+"' height='50' onclick='showThumbs(\""+picz[i]+"\")' /> ");
}
Notice that the showThumbs function doesn't have the img's id now. This way we can avoid issues caused by file types.
The showThumbs function will remain the same, and will have as a parameter the image source.

I hope this is what you're looking for. Good luck.

by Maria on Saturday, October 6th 2007 at 02:04 PM

Hi Sorin - I have not yet been successful. Below is the full script. It writes the thumbnails, but it doesn't call the big image on click. Do you think this is a syntax problem? I couldn't figure it out. Could you please help?

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var i=0;
var finished=false;
var paused=false;
var running=false;
function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pic4=new Image();
pic4.src="5.jpg";
pic5=new Image();
pic5.src="6.jpg";

pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
pict[4]=pic4.src;
pict[5]=pic5.src;
}
function next()
{
finished=false;
if(i<pict.length-1)
{
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=0;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function prev()
{
finished=false;
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}

function startSlide()
{
running=true;
if(navigator.appVersion.indexOf("MSIE") == -1)
{
interval = setInterval(FFSlideshow,1000);
}
else
{
interval = setInterval(slideshow,1000);
}
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
function slideshow()
{
if (i<pict.length-1)
{
document.getElementById('pictureContainer').filters[0].Apply();
document.getElementById("slideshow").disabled=true;
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false;
clearInterval(interval);
}
else
{
document.getElementById('pictureContainer').filters[0].Apply();
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
}
function FFSlideshow()
{
if (i<pict.length-1)
{
document.getElementById("slideshow").disabled=true;
i++
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false
clearInterval(interval);
}
else
{
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}

var picz = new Array();
picz[0] = "1.jpg";
picz[1] = "2.jpg"
picz[2] = "3.jpg"
picz[3] = "4.jpg"
picz[4] = "5.jpg"
picz[5] = "6.jpg"

function thumbs() {

for (i=0;i<picz.length;i++)
{
//document.write("<img src='" + picz[i] + "' />");
//document.write("<img src='thumb" + picz[i] + "' height='50' onclick='showThumbs("" + picz[i] + "")' /> ");
document.write("<img src='thumb" + picz[i] + "' onclick='showThumb(" + picz[i] + ")' /> ");
//document.write(picz[i]);


}
}

function showThumbs(x)
{
document.getElementById("picture").src=x;
}

//-->
</script>
</head>
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
<div id="thumbs">

<script type="text/javascript">
thumbs();
</script>

</div>
</center>
</body>
</html>

by Maria on Saturday, October 6th 2007 at 02:28 PM

Hi Sorin - I have just noticed that I have a syntax issue with the showThumbs function. I fixed it, but it still doesn't work.

document.write("<img src='thumb" + picz[i] + "' onclick='showThumbs(" + picz[i] + ")' /> ");

Maria

by Sorin Sodolescu on Saturday, October 6th 2007 at 02:49 PM

Hi Maria

I'm sorry but my previous post here wasn't 100% accurate: after you post your message on Geekpedia some elements are converted.
This line wasn't supposed to look like this:
document.write("<img src='"+picz[i]+"' height='50' onclick='showThumbs(""+picz[i]+"")' /> "); Notice that the argument on showThumbs has 4 double quotes quotes.
That line actualy should say
document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(\ ""+picz[i]+"\ ")' /> ");
You can see that there's a slash before the double quote (remove the space between them, i just wrote it this way so the slash won't dissapear again).
And here is the explanation: if you don't put any quotes in there, the value is considered a constant, so you need to put it between quotes to make it a string. But if you put a normal double quote, you break your code; you can't put a single quote either, so the answer is to escape a double quote.
Just to be sure there won't be any missunderstandings, I'll write that line again without the symbols:
document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(SLASH DOUBLE QUOTE DOUBLE QUOTE+picz[i]+DOUBLE QUOTE SLASH DOUBLE QUOTE)' /> ");

I hope this time you won't have any problems.

by Maria on Saturday, October 6th 2007 at 03:02 PM

Hi Sorin - it worked just fine! A BIG THANKS. :)

maria

by Maria on Saturday, October 6th 2007 at 11:04 PM

Hi Sorin -

Would it be possible to have the slideshow function to be called in less than 5 seconds?

I apologize for being so inquisitive, but I starve for knowledge. :)

Maria

by Sorin Sodolescu on Sunday, October 7th 2007 at 05:50 AM

Hi Maria

Of course you can, you just need to edit the startSlide() function, and replace the 5000 miliseconds with what you want:
setInterval(slideshow,5000);
That should do the trick

by Maria on Sunday, October 7th 2007 at 08:51 AM

Hi Sorin - I understood it.

Thank you so much for your expertise.

Maria

by Bruce on Sunday, December 2nd 2007 at 05:29 PM

I am trying to get this GREAT!! script to work inside a frame, but can't figure it out.

Can you help?

Thanks.

by Nick on Sunday, December 16th 2007 at 12:30 PM

Sorin the slide show is great and I realy like the thumb nail question Maria asked. I\'m new to working with javescript and don\'t quite grasp how to make the code show my thumb nails. Could you or Maria display the complete html for the slide show with thumb nails so I can find out what I\'m doing wrong. Thank you very much.

by Sorin Sodolescu on Sunday, December 16th 2007 at 02:18 PM

Hi Nick. I'm glad you like the slideshow. I will paste over here a sample html file. For this example to work you will need 6 regular pictures (1.jpg - 6.jpg) and 6 thumbnails (thumb1.jpg-thumb6.jpg). I'll also mail you the file.

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var i=0;
var finished=false;
var paused=false;
var running=false;
function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pic4=new Image();
pic4.src="5.jpg";
pic5=new Image();
pic5.src="6.jpg";

pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
pict[4]=pic4.src;
pict[5]=pic5.src;
}
function next()
{
finished=false;
if(i<pict.length-1)
{
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=0;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function prev()
{
finished=false;
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}

function startSlide()
{
running=true;
if(navigator.appVersion.indexOf("MSIE") == -1)
{
interval = setInterval(FFSlideshow,1000);
}
else
{
interval = setInterval(slideshow,1000);
}
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
function slideshow()
{
if (i<pict.length-1)
{
document.getElementById('pictureContainer').filters[0].Apply();
document.getElementById("slideshow").disabled=true;
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false;
clearInterval(interval);
}
else
{
document.getElementById('pictureContainer').filters[0].Apply();
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
}
function FFSlideshow()
{
if (i<pict.length-1)
{
document.getElementById("slideshow").disabled=true;
i++
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false
clearInterval(interval);
}
else
{
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}

var picz = new Array();
picz[0] = "1.jpg";
picz[1] = "2.jpg"
picz[2] = "3.jpg"
picz[3] = "4.jpg"
picz[4] = "5.jpg"
picz[5] = "6.jpg"

function thumbs() {

for (i=0;i<picz.length;i++)
{

document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(\""+picz[i]+"\")' /> ");
}
}

function showThumbs(x)
{
document.getElementById("picture").src=x;
}

//-->
</script>
</head>
<body onLoad="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onClick="prev()" />
<input id="next" type="button" value="next" onClick="next()" />
<input id="slideshow" type="button" value="slideshow" onClick="startSlide()" />
<input id="pause" type="button" value="pause" onClick="pause()" /><br />
<div id="number">Picture 1</div>
<div id="thumbs">

<script type="text/javascript">
thumbs();
</script>
</div>
</center>
</body>
</html>

by msmee on Tuesday, December 18th 2007 at 01:18 AM

This is a great script-- i was going to do these efects using flash but this is sooo much better!

The pictures in the sample are great too-- i love new york city!

Thanks a million, Sorin!

by Sorin Sodolescu on Tuesday, December 18th 2007 at 11:50 AM

Hi msmee.
I'm glad you like this script, but you should be aware that there is a downside to it: the transition effects only work in Internet Explorer.
Also, I'm glad you like the pictures... but I can't take credit for those pictures - I have them from a friend from NYC.

by Emmanuel on Saturday, January 5th 2008 at 08:58 AM

Hi everyone new to Javascript used the code above and it worked just fine, thanks Sorin...Does anyone know how to include the transistion effects in other browsers?

by andrian on Saturday, January 19th 2008 at 06:55 PM

What a great script. Scripting is still a new toy for me. I am learning it by doing it. I wonder how I can change the square box buttons (Prev, next, slideshow, and pause) to something else, say just words without the white box

Thank you

by Sorin Sodolescu on Sunday, January 20th 2008 at 08:41 AM

Hi Andrian.
I'm glad you like my script. To change the input buttons, you just need to replace the input tags in the script. For example:
replace
<input id="prev" type="button" value="prev" onClick="prev()" />
with
<span id="prev" onClick="prev()">previous</span>
I hope you'll find this useful.
Sorin

by Andrian on Sunday, January 20th 2008 at 10:45 PM

Hi Sorin,
Thanks for the quick respond. It works. Also, I have been figuring out the thumbnail script above ( The script that you wrote as a reply for NICK). I know you exlpained it already, but I just could not figure out where the error is. Could you help me, plz
Thank you so much.
It has been useful analyzing the script.

by Sorin Sodolescu on Monday, January 21st 2008 at 10:45 AM

Hi Andrian.

You're getting that error because when I posted here on geekpedia some slashes got removed from my original text. So, let me show you the line with the problem:
document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(""+picz[i]+"")' /> ");
To get rid of the error you need to escape 2 quotes, meaning that you have to add a slash before each quote. The line should look something like this:
document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(SLASH""+picz[i]+"SLASH")' /> ");
The script should work after this change. I'll email you a sample file too. Good luck with your script!

by Andrian on Monday, January 21st 2008 at 11:56 AM

Hi Sorin,
Thanks for the reply. I think when you mean about "slash" is really "back slash". It works now. thank you

Oh yea, one more thing, the buttons move if the I put pictures that are differently oriented. I mean, if I combine horizontal pictures with vertical pictures, it will move the buttons position. What i did was moved the button to the top of the pictures. Do you have any idea how to keep the buttons on the bottom and keep them stays regardless the pictures's orientation

by Sorin Sodolescu on Monday, January 21st 2008 at 12:05 PM

Hi again.

Sorry, you are right, I ment to say back slash.
To keep the buttons from moving you could do something like this:
put the image, and the thumbnails inside a big div - give that div the height you think is appropiate (preferably the height of the biggest picture). After doing so, the buttons will always stay at the bottom of the div, regardless the size of the picture inside.

by Andrian on Monday, January 21st 2008 at 12:16 PM

you are the best Sorin.

thanks alot

by Kripali on Wednesday, February 13th 2008 at 06:20 AM

hey hi Sorin.........
how are you.......?
Your code is simply amazing......
I have tried your both codes slideshow normal and also slideshow with thumbnails.........

But i am not able to run the code with thumbnails properly........

Below is the code i have used:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var i=0;
var finished=false;
var paused=false;
var running=false;

function loadPics()
{
pic0=new Image();
pic0.src="1.jpg";
pic1=new Image();
pic1.src="2.jpg";
pic2=new Image();
pic2.src="3.jpg";
pic3=new Image();
pic3.src="4.jpg";
pic4=new Image();
pic4.src="5.jpg";
pic5=new Image();
pic5.src="6.jpg";

pict=new Array();
pict[0]=pic0.src;
pict[1]=pic1.src;
pict[2]=pic2.src;
pict[3]=pic3.src;
pict[4]=pic4.src;
pict[5]=pic5.src;
}
function next()
{
finished=false;
if(i<pict.length-1)
{
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=0;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function prev()
{
finished=false;
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}

function startSlide()
{
running=true;
if(navigator.appVersion.indexOf("MSIE") == -1)
{
interval = setInterval(FFSlideshow,1000);
}
else
{
interval = setInterval(slideshow,1000);
}
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
function slideshow()
{
if (i<pict.length-1)
{
document.getElementById('pictureContainer').filters[0].Apply();
document.getElementById("slideshow").disabled=true;
i++;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false;
clearInterval(interval);
}
else
{
document.getElementById('pictureContainer').filters[0].Apply();
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
document.getElementById('pictureContainer').filters[0].Play();
}
}
function FFSlideshow()
{
if (i<pict.length-1)
{
document.getElementById("slideshow").disabled=true;
i++
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
else if (i==pict.length-1 && finished==false)
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
finished=true;
running=false
clearInterval(interval);
}
else
{
i=0;
finished=false;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture "+1*(i+1);
}
}
function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}

var picz = new Array();
picz[0] = "1.jpg";
picz[1] = "2.jpg"
picz[2] = "3.jpg"
picz[3] = "4.jpg"
picz[4] = "5.jpg"
picz[5] = "6.jpg"

function thumbs() {

for (i=0;i<picz.length;i++)
{

document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(/""+picz[i]+"/")' /> ");
}
}

function showThumbs(x)
{
document.getElementById("picture").src=x;
}

//-->
</script>
</head>
<body onLoad="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onClick="prev()" />
<input id="next" type="button" value="next" onClick="next()" />
<input id="slideshow" type="button" value="slideshow" onClick="startSlide()" />
<input id="pause" type="button" value="pause" onClick="pause()" /><br />
<div id="number">Picture 1</div>
<div id="thumbs">

<script type="text/javascript">
thumbs();
</script>
</div>
</center>
</body>
</html>


I hope you revert back to me at the earliest......

thank you............

by Sorin Sodolescu on Wednesday, February 13th 2008 at 08:23 AM

Hello Kripali

I'm glad you find the script useful, and also I have to appologise because it's my fault you're getting that error.
In a previous comment i wrote SLASH, but i should have written BACKSLASH. So you'll find the error on this line:
document.write("<img src='thumb"+picz[i]+"' onclick='showThumbs(/""+picz[i]+"/")' /> ");
You'll have the replace the / characters near the quotes with the \ character (replace Slash with Backslash).
Good luck.

by pat Boobchai on Saturday, February 16th 2008 at 03:31 PM

Hi
I don\\\'t care what people said about your script. For me, it work great. I have been copied script from difference places but always got stuck with the up loading my pictures because I don\'t have any computer knowledge. All the scripts shown on the internet assumed that everyone is javascript literate but it is not true. I got my picture running now. Many thanks to you.

Pat Boobchai

by Harsh on Thursday, April 17th 2008 at 07:00 PM

Sorin,

I tried the script, it works great.
What changes I have to do to remove all button click events and let the slideshow run on a page with interval of 15 sec between each image

Thanks for you time.

-Harsh

by on Friday, April 18th 2008 at 03:59 AM

To let the slideshow start on page load and have a 15 sec interval:
- remove the buttons from the HTML
- at the end of loadPics() call the startSlide function -> startSlide()
- in the startSlide() function change the setInterval function -> interval = setInterval(FFSlideshow,5000) to interval = setInterval(FFSlideshow,15000) (for both IE and FF)
- in the slideShow and FFslideShow functions remove the ELSE IF statement to make the slideshow loop

That should do it.

by Shona on Friday, April 25th 2008 at 06:38 AM

Hi like the script can get it to run no problem with the buttons but cannot get it to run automatically on page load without the buttons. Please help!!!!

by Joggee on Monday, June 2nd 2008 at 05:29 AM

Wonderful. really impressive

by Jeevie on Thursday, June 26th 2008 at 02:40 AM

Hi

The script was quite useful to me. However can someone assist me with using the script to run the slideshow automatically on page load.

I tried calling the startslide() function on onload event of body tag but it doesnt work.

Thanks in advance

by shona on Thursday, June 26th 2008 at 03:56 AM

Unsunscribe please

by alia on Tuesday, August 26th 2008 at 03:26 AM

hi..thanx for the tutorial..
but how if i want to connect to an XML database?
all of the picture will be stored in XML...
please help me...

by luclarie on Tuesday, August 26th 2008 at 12:55 PM

I'm a total novice and tried copy the code and implementing over and over again without success... It's almost there, says there's something undefined...

I'll keep trying but in meantime if you have any pointers please let me know.

Thanks - luclarie

by Sysqa on Tuesday, March 17th 2009 at 03:42 PM

Thank you for this code!
I change a little bit and mixed them Kenneth Clark php code. Thank you for all!

And a new code:

javascript:
var i=0;
var paused=false;
var running=false;

function next()
{
if(running==true)
{
stop();
}
if(i<pict.length-1)
{
i ;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
else
{
i=0;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
}

function prev()
{
if(running==true)
{
stop();
}
if (i>0)
{
i--;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
else
{
i=pict.length-1;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
}

function startSlide()
{
running=true;
interval = setInterval(FFSlideshow,3000);
document.getElementById("slideshow").disabled=true;
document.getElementById('number').innerHTML="Picture " (i 1);
}

function FFSlideshow()
{
if (i<pict.length-1)
{
document.getElementById("slideshow").disabled=true;
i
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
else
{
i=0;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " (i 1);
}
}

function pause()
{
if(running==true)
{
if(paused==false)
{
paused=true;
document.getElementById("pause").value="resume";
clearInterval(interval);
document.getElementById('number').innerHTML="Paused";
}
else
{
startSlide()
paused=false;
document.getElementById("pause").value="pause";
}
}
}

function stop()
{
document.getElementById("slideshow").disabled=false;
document.getElementById('number').innerHTML="End of slideshow";
running=false;
paused=false;
document.getElementById("pause").value="pause";
clearInterval(interval);
}

php code:

<?php
ob_start(); //Output buffering
//first we send the header to the browser to process the page
//as JavaScript
header("content-type: application/x-javascript");
$imgDir = "images/"; // the directory the iimages reside in
$counter = 0; // our file counter;
$list = "";

//regex pattern to check file extensions
$pattern="(.jpg$)|(.png$)";

//read through the dir and create the img list
if($dir = opendir($imgDir)) {
while(false !== ($file = readdir($dir))){
if(eregi($pattern, $file)){
$path = $imgDir . $file;
$list .= 'pict['.$counter.']="'.$path .'";' /*.chr(13)*/;
$counter ;
}
}
closedir($dir);
}
//echo the array declaration
echo "pict = new Array();" /*. chr(13)*/;
echo $list;
ob_end_flush();
?>

and the html code:

<html>
<head>
<script language="javascript" type="text/javascript" src="readdir.php"></script>
<script language="javascript" type="text/javascript" src="slideshow.js"></script>
</head>
<body>
<center>
<div id="pictureContainer">
<img id="picture" name="picture" src="images/1.png" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="stop" type="button" value="stop" onclick="stop()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
</center>
</body>
</html>

by Sysqa on Tuesday, March 17th 2009 at 03:50 PM

Upsss!

I don't know why some missed in the javasript code.

"Picture " (i 1); is the right code not "Picture " (i 1);

by Sysqa on Tuesday, March 17th 2009 at 03:54 PM

I try third

So the plus string is missed. I can't paste it.

by shirley on Saturday, May 16th 2009 at 09:04 AM

hi, i want to trigger the slideshow automatically
i try to call the function
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="images/p09.jpg" onactivate="startSlide()" /></div><br />


<script> function startSlide() {return};</script>
<!--
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
-->

</center>
</body>

but it does not trigger, can you help me?

also, anyone has posted the slideshow for firefox?
thanks !

by asha on Monday, August 10th 2009 at 08:49 AM

hi,
good one. hw to know whether my pic has seated properly in the array? bcoz initially my pic is shown i.e pic1, later functions like prev, next, slideshow doesnt show my pic . y is this happening. how can i rectify this?

by asha on Monday, August 10th 2009 at 09:14 AM

hi,
good one. hw to know whether my pic has seated properly in the array? bcoz initially my pic is shown i.e pic1, later functions like prev, next, slideshow doesnt show my pic . y is this happening. how can i rectify this?

by asha on Monday, August 10th 2009 at 01:04 PM

hey ya i got it... but wat could be the code to display this in fire fox?

by ali rizwan sheikh on Wednesday, November 25th 2009 at 11:28 AM

Hi

i am developing a javascript remote control which is draggable on the screen anywhere, as it being a remote control i want to play, pause and stop the flash animated background. Is it possible in javascript to control the flash animation running as a page's background?

I hope it makes sense.

Thanks
ALi

by jim on Wednesday, December 30th 2009 at 11:08 PM

Hi Sorin, I haven't tried your slideshow but after reading all of the posts I'm sure its is great! But...what is even greater is the expert, concise, and patient response you give to us with questions. I will check here often as I think you really love to share your knowledge.

thanks again

by MSI on Monday, January 4th 2010 at 07:17 PM

This works great with Firefox, but getting error on page message in IE8(works fine with IE7).
The problem lies here:


if (i<pict.length-1)
{
document.getElementById('pictureContainer').filters[0].Apply();
document.getElementById("slideshow").disabled=true;
i ;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " 1*(i 1);
document.getElementById('pictureContainer').filters[0].Play();
}
else if (i==pict.length-1

by MSI on Monday, January 4th 2010 at 07:18 PM

This works great with Firefox, but getting error on page message in IE8(works fine with IE7).
The problem lies here:


if (i<pict.length-1)
{
document.getElementById('pictureContainer').filters[0].Apply();
document.getElementById("slideshow").disabled=true;
i ;
document.getElementById('picture').src=pict[i];
document.getElementById('number').innerHTML="Picture " 1*(i 1);
document.getElementById('pictureContainer').filters[0].Play();
}
else if (i==pict.length-1

by Matt on Wednesday, February 17th 2010 at 08:43 PM

would it be possible to add a transition effect (for example image sliding left or fade) to this current code?

by olofen on Sunday, March 14th 2010 at 05:04 PM

The slideshow script looks good!
BUT for me it is important that the transitions works in a Safaribrowser as well. Is there a possibility to fix it so I get smooth transitions there as well?

sincerely yours
olof thiel
stockholm
sweden

by Ron on Friday, April 23rd 2010 at 10:25 PM

Great! Just what i've been lookin for. Thank You very much.

by Steve on Thursday, May 13th 2010 at 09:56 AM

I got an "Object required" error on this line:

a.filters[0].Play();

I am not sure what is wrong, anyone can help?

thanks a million!

<!--Images Slideshow-->
<div id="pictureContainer" style="width:100%; filter:progid:DXImageTransform.Microsoft.Fade(duration=5.0,overlap=5.0)">
<img id="slide" onload="resize('slide')" width="3" height="2" src="http://img260.imageshack.us/img260/1337/bigstockphotobeauty1200.jpg" />
</div>
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1;
function slideit()
{
var a = document.getElementById('pictureContainer');
a.filters[0].Apply();
//if browser does not support the image object, exit.
if (!document.images)
{return;}
document.images.slide.src=eval("image" step ".src");
if (step<3)
{step ;}
else
{step=1;}
//call function "slideit()" every 4.0 seconds except for 1st loop to be 0.0 seconds
if (document.getElementById('slide').width <=10)
{setTimeout("slideit()",0000);}
else
{setTimeout("slideit()",4000);}
a.filters[0].Play();
}
slideit();
//-->
</script>

by Nasrin on Wednesday, June 9th 2010 at 03:02 AM

this tutorial is very very good. It help me.
Thanks alot.
I cross my fingers for you


Comment Comment on this tutorial
Name: Email:
Message:
Comment Related Tutorials
There are no related tutorials.

Comment Related Source Code
There is no related source code.

Jobs JavaScript Job Search
My skills include:
Enter a City:

Select a State:
Advanced Search >>
Sponsors
Discover Geekpedia
News News
Tutorials Tutorials
Source Code Source Code
Pictures Pictures
Videos Videos
Reviews Reviews
Special Report Special Reports
Bargains Bargains
Resources Resources
Icons Icons
Newsgroups Newsgroups
Knowledge Base Knowledge Base
Books Books
Magazines Magazines
Books Downloads
Jobs Jobs
Forums Forums
Search Search

Other Resources