Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 03-02-2010
Member
 
Join Date: Aug 2006
Posts: 162
How to do Slide Show using JavaScript?

Hi friends,
I am new to this forum, so please ignore my mistakes. I am doing JavaScript from last couple of months. Recently I came to know that we can do the Slide Show in JavaScript just as we do in PowerPoint. Is it possible to do exactly same.?? Please tell me how to do Slide Show using JavaScript? If possible, please provide me with the coding of the same.!!
__________________
Processor: AMD Athlon(tm) 64 X2 Dual Core @ ~2.2 GHz
Memory: 1024MB RAM
Hard Drive: 200 GB
Video Card: RADEON X300/X550 Series
Reply With Quote
  #2  
Old 03-02-2010
Member
 
Join Date: Apr 2008
Posts: 2,001
Re: How to do Slide Show using JavaScript?

I would like to tell you that you can create a Web-Based image slideshows with some cool transition effects. These effects are similar to those of PowerPoint. In the JavaScript the slideshow cycles through the set number of images. And for doing this there is no need of reloading the rest of the page. The following are the four JavaScript functions which are used for this purpose :
  • previous_image() - This function displays the previous image.
  • next_image() - This function displays the next image.
  • image_effects() - Generates the different transition effects.
  • slideshow_automatic() - This function is useful for displaying the next image after a certain delay.
Reply With Quote
  #3  
Old 03-02-2010
Member
 
Join Date: May 2008
Posts: 2,293
Re: How to do Slide Show using JavaScript?

You can use the following code for doing the Slide Show in JavaScript :

Code:
var image=new Array("pic1.jpg",
                    "pic2.jpg",
                    "pic3.jpg",
                    "pic4.jpg",
                    "pic5.jpg",
                    "pic6.jpg",
                    "pic7.jpg",
                    "pic8.jpg",
                    "pic9.jpg",
                    "pic10.jpg"
                    )

var num=0

var timeDelay

Preload Images
Preload the images in the cache so that the images load faster

var imagePreload=new Array()
for (i=0;i<image.length;i++)
{
   imagePreload[i]=new Image()

imagePreload[i].src=image[i]
}
Hope that you were looking for the same..!!
Reply With Quote
  #4  
Old 03-02-2010
Member
 
Join Date: May 2008
Posts: 2,008
Re: How to do Slide Show using JavaScript?

Its good option that we can do the slide show using the JavaScript. For doing this first you would have to start a blank document in Notepad or in HTML editor. Then you will have to mark up the document with basic HTML tags as follows :
HTML Code:
name="slideshow"
width=360
height=230>
Then you will have to create hyperlinks for the words "Next" and "Back". So that when the user clicks on either of these words, the clicking action calls the "doNext" and "doBack" functions will come into action. You can check that in a web browser after saving that file as HTML file.
Reply With Quote
  #5  
Old 03-02-2010
Member
 
Join Date: Apr 2008
Posts: 1,948
Re: How to do Slide Show using JavaScript?

I think that till now you should have understood the concepts of the slide show that is used in JavaScript. Now I am providing you with JavaScript function that can do the cool transition when we move from one image to the next. Check the following code for that :
Code:
function image_effects()
{
  var selobj = document.getElementById('slideshow_transition');
  var selIndex = selobj.selectedIndex;

  slideShow.filters.revealTrans.Transition=selIndex
  slideShow.filters.revealTrans.apply()
  slideShow.filters.revealTrans.play()
  
}
Reply With Quote
  #6  
Old 03-02-2010
Member
 
Join Date: Feb 2008
Posts: 1,848
Re: How to do Slide Show using JavaScript?

You can also do the Automatic Slide Show in JavaScript.!! For doing that you will need to use the setTimeout() method to create the delay. The SetTimeout() method takes two parameters. The first parameter is a string where you use the JavaScript code after the time is expired. The second parameter is an integer that specifies the number of milliseconds. You can have a look on the coding that is been described below :
Code:
function slideshow_automatic()
{ 
if (slideshow.checked)
   {
    if (num<image.length)
     {
       num++

       if (num==image.length) 
       num=0
       image_effects()

       timeDelay=setTimeout("slideshow_automatic()",6000) 
       document.images.slideShow.src=image[num]   
     }
   }  
   if (slideshow.checked==false)
   { 

      clearTimeout(timeDelay)
   }
}
By using this code the slide show will get the time interval of 6 seconds.
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "How to do Slide Show using JavaScript?"
Thread Thread Starter Forum Replies Last Post
Creating a slide show by HD TV Elizabeth Allen Windows Software 5 09-04-2010 12:00 PM
Windows Slide show movie not able to mail Franscisco Technology & Internet 5 21-01-2010 12:48 AM
Change Slide show timing in Windows XP Sacchidananda Windows Software 3 14-07-2009 10:31 AM
Slide show? CJSM Vista Help 14 02-04-2009 12:41 AM
Slide Show Gadget Stopped Working itsmiami Vista Help 6 16-11-2007 06:22 PM


All times are GMT +5.5. The time now is 11:16 PM.