Image Slideshow with description - Source Code

WebSiteMadeEasy.net

FontsMadeEasy.com

RankChecker.net

Google Search:

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

Image Slideshow with description

This nifty image slideshow script lets the user manually move back and forth between images, by clicking on the provided buttons. An accompanying textual message of your choice is displayed below each image. Cool!

Insert into <HEAD>

//  Browser checker

Browser_Name = navigator.appName;
   Browser_Ver  = parseInt(navigator.appVersion);
   if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd";
   else Browser_Gen = "<3rd";

if (Browser_Gen == '>=3rd') {

num_of_slides = 5;    // Declare the number of slides in your show
   slide_num = 1;        // Which slide loads ups first

// Description of each slide
   desc1 = "First Slide - the number one, with a RED Background";
   desc2 = "Second Slide - the number two, with a ORANGE Background";
   desc3 = "Third Slide - the number three, with a GREEN Background";
   desc4 = "Fourth Slide - the number four, with a BLUE Background";
   desc5 = "Fifth Slide - the number five, with a PURPLE Background";
   }

//  These functions alter the slide_num accordingly
   function firstslide(){
     slide_num = 1;
     changeslide();
   }
   function prevslide(){
     slide_num = slide_num - 1;
     if(slide_num < 1){
       slide_num = num_of_slides;
     }
     changeslide();
   }
   function nextslide(){
     slide_num = slide_num + 1;
     if(slide_num > num_of_slides){
       slide_num = 1
     }
     changeslide();
   }
   function lastslide(){
     slide_num = 5;
     changeslide();
   }

//  This function changes the slide and the description box according to the slide_num
   function changeslide(){

//  Changes the slide
     eval('document.picbox.src = "pic' + slide_num + '.jpg"');

//  Changes the description box
     eval('document.descform.descbox.value = "Slide ' + slide_num + ': ' + eval('desc' + slide_num) + '"');
   }
   // end hiding contents -->
   </script>

Insert into <BODY>

Other Options

Directions
1) Copy and paste the script within the 'head' tag of your html file.
2) Name all your pictures using the following schema: pic1, pic2, pic3, .. ,pic25, ...
3) Then change the 'num_of_slides' value to match the number of pictures you will be using.
4) Change the 'descX' values to describe the corresponding slides.
5) Add this within the 'body' TAG: " onload='changeslide()' "
6) In the body of your html file you must add the following within the 'image' tag of the image you'll be sliding: " NAME='picbox' "
7) For the textbox for a description of the slides, you will also have to add this to the body of your html file: " <form name="descform"> <textarea name="descbox" rows=3 cols=30 wrap=virtual onFocus="this.blur()"> </textarea></form> "
8) These are the links you have to use in your 'href' tags to slide the images: First slide : " href='javascript:firstslide()' Previous slide: " href='javascript:prevslide()' Next Slide : " href='javascript:nextslide()' Last Slide : " href='javascript:lastslide()'
9) All the pictures must be in the same dir as the html file.