...

View Full Version : Javascript Slideshow Problem...



MarkL410
06-16-2010, 06:08 PM
Hi there,

I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me.

I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">


body
{
background-image:url('background.jpg');
}

.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}

#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}

#nav li {
display:inline-block;
padding:0;
margin:0;
}

* html #nav li { display: inline; }
*+html #nav li { display: inline; }

#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}

#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}

#nav li:first-child a {
border-left:1px solid #42432d;
}

#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}

#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}

#nav a:active {
background:#e35a00;
color:#fff;
}

p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}

p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}


<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>

<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//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 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

</style>
</head>

<body>

<div class="header"><img src="logo.jpg"></div>

<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>


<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>

<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>

<embed src="beatles.mid" width="144" height="60">

</body>

randomuser773
06-16-2010, 06:58 PM
I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...

You have put your code inside your <style> element.
Also this function must not be called until its elements have rendered, so replace slideit(); with window.onload = slideit;

MarkL410
06-17-2010, 12:44 PM
Thanks for the info, here is the amended code but I am still having the same problem...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">


body
{
background-image:url('background.jpg');
}

.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}

#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}

#nav li {
display:inline-block;
padding:0;
margin:0;
}

* html #nav li { display: inline; }
*+html #nav li { display: inline; }

#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}

#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}

#nav li:first-child a {
border-left:1px solid #42432d;
}

#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}

#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}

#nav a:active {
background:#e35a00;
color:#fff;
}

p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}

p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}

</style>
</head>

<body>

<div class="header"><img src="logo.jpg"></div>

<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>


<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>

<script>
<!--
//variable that will increment through the images
var step=1
function window.onload = slideit;{
//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 2.5 seconds
setTimeout("slideit;",2500)
}slideit;
//-->
</script>

<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>

<embed src="beatles.mid" width="144" height="60">

</body>

Sciliano
06-17-2010, 02:06 PM
Mark:

Wouldn't you like something better than that?

Do you have a URL to your site?

MarkL410
06-17-2010, 02:58 PM
Mark:

Wouldn't you like something better than that?

Do you have a URL to your site?

In the long run yes but this is my first ever website and I'm basically practising javascript at the moment. I can't understand why I can't get that code to work.

MarkL410
06-17-2010, 04:54 PM
I'm still having trouble, is there anyone that can tell me what's wrong with the code above?

Philip M
06-17-2010, 05:34 PM
This is very poor code, as Sciliano has indicated.

To correct:-


<body onload = "slideit()">
and the final part of the script alter as follows:-


//variable that will increment through the images
var step=1

function slideit() {
document.images.slide.src=eval("image"+step+".src")
if (step<3) {step++} // there are 4 images so surely should be if (step<4)
else {step=1}
//call function "slideit;" every 2.5 seconds
setTimeout("slideit()",2500)
}
</script>

The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that (as here) you are looking at ancient and perhaps unreliable code.

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


"Dives sum, si non redo eis quibus debeo. - I am a rich man as long as I do not pay my creditors"

MarkL410
06-17-2010, 06:22 PM
Apologies for the poor post title and thank you for the information, I have got the following code now...


<script type="text/javascript">

<body onload = "slideit()">

var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
</script>

<script>

//variable that will increment through the images
var step=1

function slideit() {
document.images.slide.src=eval("image"+step+".src")
if (step<4)
{step++}
else
{step=1}
//call function "slideit;" every 2.5 seconds
setTimeout("slideit;",2500)
}

</script>

<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>

Is that right? Sorry I am totally new to javascript so I may be making stupid mistakes.

Magic Toolbox
06-20-2010, 04:34 AM
Do you want to learn JavaScript or do you just want to add a nice looking slideshow to your site? If the latter, then use an existing slideshow script that already does what you want, works in all browsers and is easy to install. e.g. Magic Slideshow (http://www.magictoolbox.com/magicslideshow/).

If you want to learn JavaScript then use some of the good online tutorials (http://www.w3schools.com/js/default.asp).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum