Javacript Slide Show

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 402,623 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,161 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3180 | Replies: 2

•

Join Date: May 2004

Posts: 4

Reputation: squirrelj is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

squirrelj

Offline

Newbie Poster

Javacript Slide Show

Aug 22nd, 2005

I have tried to put a javascript slide show in my site but i cam't seem to get it to work. Here is the code for my page i have checked that all my images and folder names are correct butit still won't work

Cheers for any help

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head> 


   <title>KD Builders</title> 
    
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="KDBuilders1.css" media="screen" />
 
</style>
<script language="JavaScript">
<!-- 
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";



var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");

imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");

imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");







var totalImages = imageArray.length; 

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}


function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}


function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}


Now that we know which image to display, we just need to return the value: 

var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}


function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
} 

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}


function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);




// -->

</script>





</head>



<body> 



<div id="container"> 
       

   <div id="pageHeader"><IMG src="logo2.gif" height="80" width="250" /> 
          


</div> 
<div id="button"> 
<ul> 
<li><a href="Index.htm">Home</a></li> 
<li><a href="GabionBaskets.htm">Gabion Baskets</a></li> 
<li><a href="BuildingWork.htm">General Building</a></li> 
<li><a href="ContactUs.htm">Contact Us</a></li> 
</ul> 
</div>



<DIV id=CenterBox><IMG src="image11.jpg"  align=default>
<IMG src="image9.jpg" align=default>
<IMG src="image6.jpg" align=default>
<IMG src="image5.jpg" align=default>




</div>

<div id="LeftBox"> 


<h4>General Building</h4>


<div id="button1"> 
<ul> 
<li><a href="Index.htm">Project 1</a></li> 
<li><a href="AboutUs.htm">Project 2</a></li> 
<li><a href="g.htm">Project 3</a></li> 
</ul> 
</div>
</div>

<div id="MiddleBox"> 


<h4>Project 1</h4>

<p class="p1"> KD Builders have over 13 years experience in the building and construction industry with both partners being 

C.I.T.B trained to an advanced craft level and are experienced in all aspects of walling and general building 

construction.</p>
<p class="p1">
The company has recently expanded into Gabion Basket installation and fitting service and acquired a new Director to the 

company, Gordon Williamson who has over 10 years experience in this field of work.The company currently has a maximum of 10 

staff at any one time. Although we are a small company we pride ourselves on our professionalism and craftsmanship with our 

attention to detail.</p>

</div>
<div id="RightBox"> 
<img name="slideImg" src="27.jpg" > 

<a href="#" onClick="switchImage('slideImg')">play slide show</a> 

<a href="#" onClick="clearTimeout(timerID)"> pause</a> 

<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 

<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 





</div> 



<div id="Footer">
<img src="break.gif" width="300" height="2"/>
<p class="p1">

KD Builders <br>
Tel: 01484 6674534<br>
E-Mail: Info@KDBuilders.co.uk
</p>



</div>

</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head> 


   <title>KD Builders</title> 
    
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="KDBuilders1.css" media="screen" />
 
</style>
<script language="JavaScript">
<!-- 
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";



var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");

imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");

imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");







var totalImages = imageArray.length; 

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}


function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}


function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}


Now that we know which image to display, we just need to return the value: 

var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}


function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
} 

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}


function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);




// -->

</script>





</head>



<body> 



<div id="container"> 
       

   <div id="pageHeader"><IMG src="logo2.gif" height="80" width="250" /> 
          


</div> 
<div id="button"> 
<ul> 
<li><a href="Index.htm">Home</a></li> 
<li><a href="GabionBaskets.htm">Gabion Baskets</a></li> 
<li><a href="BuildingWork.htm">General Building</a></li> 
<li><a href="ContactUs.htm">Contact Us</a></li> 
</ul> 
</div>



<DIV id=CenterBox><IMG src="image11.jpg"  align=default>
<IMG src="image9.jpg" align=default>
<IMG src="image6.jpg" align=default>
<IMG src="image5.jpg" align=default>




</div>

<div id="LeftBox"> 


<h4>General Building</h4>


<div id="button1"> 
<ul> 
<li><a href="Index.htm">Project 1</a></li> 
<li><a href="AboutUs.htm">Project 2</a></li> 
<li><a href="g.htm">Project 3</a></li> 
</ul> 
</div>
</div>

<div id="MiddleBox"> 


<h4>Project 1</h4>

<p class="p1"> KD Builders have over 13 years experience in the building and construction industry with both partners being 

C.I.T.B trained to an advanced craft level and are experienced in all aspects of walling and general building 

construction.</p>
<p class="p1">
The company has recently expanded into Gabion Basket installation and fitting service and acquired a new Director to the 

company, Gordon Williamson who has over 10 years experience in this field of work.The company currently has a maximum of 10 

staff at any one time. Although we are a small company we pride ourselves on our professionalism and craftsmanship with our 

attention to detail.</p>

</div>
<div id="RightBox"> 
<img name="slideImg" src="27.jpg" > 

<a href="#" onClick="switchImage('slideImg')">play slide show</a> 

<a href="#" onClick="clearTimeout(timerID)"> pause</a> 

<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 

<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 





</div> 



<div id="Footer">
<img src="break.gif" width="300" height="2"/>
<p class="p1">

KD Builders <br>
Tel: 01484 6674534<br>
E-Mail: Info@KDBuilders.co.uk
</p>



</div>

</body> 
</html>

•

Join Date: Dec 2004

Posts: 1,590

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 34

tgreer

Offline

Made Her Cry

Re: Javacript Slide Show

Aug 25th, 2005

That's a lot of code to debug... really more than I want to try. Where did you get the script? It might be best to contact the script author.

•

Join Date: Aug 2005

Posts: 20

Reputation: cppforlife is an unknown quantity at this point

Rep Power: 4

Solved Threads: 0

cppforlife cppforlife is offline

Offline

Newbie Poster

Re: Javacript Slide Show

Aug 29th, 2005

Ok, i found that switchImage(place) didn't have closing bracket so that's why was error. (I think so). I didn't see slideshow images but i suppose that it will work.

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head>
   <title>KD Builders</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="KDBuilders1.css" media="screen" />
 

</style>
<script language="JavaScript">
<!-- 
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";
var imageNum = 0;

imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");

var totalImages = imageArray.length; 

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}


function getNextImage() {
 if (random_display) {
  imageNum = randNum(0, totalImages-1);
 }
 else {
  imageNum = (imageNum+1) % totalImages;
 }
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}


function getPrevImage() {
 imageNum = (imageNum-1) % totalImages;
 var new_image = get_ImageItemLocation(imageArray[imageNum]);
 return (new_image);
} 

function prevImage(place) {
 var new_image = getPrevImage();
 document[place].src = new_image;
}


function switchImage(place) {
 var new_image = getNextImage();
 document[place].src = new_image;
 var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>





</head>



<body> 



<div id="container"> 
       

   <div id="pageHeader"><IMG src="logo2.gif" height="80" width="250" /> 
          


</div> 
<div id="button"> 
<ul> 
<li><a href="Index.htm">Home</a></li> 
<li><a href="GabionBaskets.htm">Gabion Baskets</a></li> 
<li><a href="BuildingWork.htm">General Building</a></li> 
<li><a href="ContactUs.htm">Contact Us</a></li> 
</ul> 
</div>



<DIV id=CenterBox><IMG src="image11.jpg"  align=default>
<IMG src="image9.jpg" align=default>
<IMG src="image6.jpg" align=default>
<IMG src="image5.jpg" align=default>




</div>

<div id="LeftBox"> 


<h4>General Building</h4>


<div id="button1"> 
<ul> 
<li><a href="Index.htm">Project 1</a></li> 
<li><a href="AboutUs.htm">Project 2</a></li> 
<li><a href="g.htm">Project 3</a></li> 
</ul> 
</div>
</div>

<div id="MiddleBox"> 


<h4>Project 1</h4>

<p class="p1"> KD Builders have over 13 years experience in the building and construction industry with both partners being 

C.I.T.B trained to an advanced craft level and are experienced in all aspects of walling and general building 

construction.</p>
<p class="p1">
The company has recently expanded into Gabion Basket installation and fitting service and acquired a new Director to the 

company, Gordon Williamson who has over 10 years experience in this field of work.The company currently has a maximum of 10 

staff at any one time. Although we are a small company we pride ourselves on our professionalism and craftsmanship with our 

attention to detail.</p>

</div>
<div id="RightBox"> 
<img name="slideImg" src="27.jpg" > 

<a href="#" onClick="switchImage('slideImg')">play slide show</a> 

<a href="#" onClick="clearTimeout(timerID)"> pause</a> 

<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 

<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 





</div> 



<div id="Footer">
<img src="break.gif" width="300" height="2"/>
<p class="p1">

KD Builders <br>
Tel: 01484 6674534<br>
E-Mail: Info@KDBuilders.co.uk
</p>



</div>

</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head>
   <title>KD Builders</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="KDBuilders1.css" media="screen" />
 

</style>
<script language="JavaScript">
<!-- 
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";
var imageNum = 0;

imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");

var totalImages = imageArray.length; 

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}


function getNextImage() {
 if (random_display) {
  imageNum = randNum(0, totalImages-1);
 }
 else {
  imageNum = (imageNum+1) % totalImages;
 }
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}


function getPrevImage() {
 imageNum = (imageNum-1) % totalImages;
 var new_image = get_ImageItemLocation(imageArray[imageNum]);
 return (new_image);
} 

function prevImage(place) {
 var new_image = getPrevImage();
 document[place].src = new_image;
}


function switchImage(place) {
 var new_image = getNextImage();
 document[place].src = new_image;
 var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>





</head>



<body> 



<div id="container"> 
       

   <div id="pageHeader"><IMG src="logo2.gif" height="80" width="250" /> 
          


</div> 
<div id="button"> 
<ul> 
<li><a href="Index.htm">Home</a></li> 
<li><a href="GabionBaskets.htm">Gabion Baskets</a></li> 
<li><a href="BuildingWork.htm">General Building</a></li> 
<li><a href="ContactUs.htm">Contact Us</a></li> 
</ul> 
</div>



<DIV id=CenterBox><IMG src="image11.jpg"  align=default>
<IMG src="image9.jpg" align=default>
<IMG src="image6.jpg" align=default>
<IMG src="image5.jpg" align=default>




</div>

<div id="LeftBox"> 


<h4>General Building</h4>


<div id="button1"> 
<ul> 
<li><a href="Index.htm">Project 1</a></li> 
<li><a href="AboutUs.htm">Project 2</a></li> 
<li><a href="g.htm">Project 3</a></li> 
</ul> 
</div>
</div>

<div id="MiddleBox"> 


<h4>Project 1</h4>

<p class="p1"> KD Builders have over 13 years experience in the building and construction industry with both partners being 

C.I.T.B trained to an advanced craft level and are experienced in all aspects of walling and general building 

construction.</p>
<p class="p1">
The company has recently expanded into Gabion Basket installation and fitting service and acquired a new Director to the 

company, Gordon Williamson who has over 10 years experience in this field of work.The company currently has a maximum of 10 

staff at any one time. Although we are a small company we pride ourselves on our professionalism and craftsmanship with our 

attention to detail.</p>

</div>
<div id="RightBox"> 
<img name="slideImg" src="27.jpg" > 

<a href="#" onClick="switchImage('slideImg')">play slide show</a> 

<a href="#" onClick="clearTimeout(timerID)"> pause</a> 

<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 

<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 





</div> 



<div id="Footer">
<img src="break.gif" width="300" height="2"/>
<p class="p1">

KD Builders <br>
Tel: 01484 6674534<br>
E-Mail: Info@KDBuilders.co.uk
</p>



</div>

</body> 
</html>