Help with a slide show

A

ATS

I'm trying to set up a slide show on a web page using Javascript. Here is
the code I have so far:

<script language="javascript">

alert("**in test area 1");

slides = new Array();
slides[0] = new Image();
slides[1] = new Image();
slides[0].scr = "Bag_W4S.jpg";
slides[1].scr = "Coat_W2S.jpg";

j = 0;

alert("**in test area 2");

Function runSlides()
{
document.images.slides.src = slides[j].src;
j = j + 1;
if (document.all)
{
document.images.slides.style.filter="blendTrans(duration=2)";
document.images.slides.filters.blendTrans.Apply();
}
if (document.all)
{
document.images.slides.filters.blendTrans.Play();
}
if (j >= 1)
{
j=0;
}
t = setTimeout('runSlides()', 5000);
}
</script>

<link href="lwespirit.css" rel="stylesheet" type="text/css" />

</head>

<body onload="runSlides();">
<div align="center" class="style1">
<h2><img src="boostertopbanner.jpg" alt="Banner" width="600" height="120"
/></h2>
<h2>Lincoln-Way East Spirit Wear</h2>
</div>

<img src="Hat2_G2S.jpg" alt="LWE Spiritwear" width="100" height="75"
name="slides" id="slides" />

There seems to be a basic problem as the two "test" alerts never happen. If
they did, does the code look correct? I would greatly appreciate any help
as this is due VERY shortly and I just wanted to add this extra touch.

Where can I find out what the "blendTrans," "style.filter" v. "filters" and
questions like that?

Lee
 
A

ATS

I found the first mistake. The problem now is I don't get a translation
between the pictures.

Any help would be appreciated.

Lee
 
M

Mick White

ATS said:
I found the first mistake. The problem now is I don't get a translation
between the pictures.

Any help would be appreciated.

Lee
Click to expand...
First, take care of your syntax errors:
scr >> src
Function >> function
Mick
 
R

RobG

ATS said:
I'm trying to set up a slide show on a web page using Javascript. Here is
the code I have so far:

<script language="javascript">
Click to expand...

Language is deprecated, type is required:

alert("**in test area 1");

slides = new Array();
Click to expand...

Even global variables should be declared with the 'var' keyword (thought
it's not absolutely required) and an initialiser is shorter. It also
isn't a good idea to have a global variable called 'slides' and an image
named 'slides', it's too easy to get them confused. Re-name the slides
array to something like:

var slideArray = [];

slides[0] = new Image();
slides[1] = new Image();
slides[0].scr = "Bag_W4S.jpg";
Click to expand...

Image objects have a src attribute, not scr:

slideArray[0] = new Image();
slideArray[0].src = "Bag_W4S.jpg";
slideArray[1] = new Image();
slideArray[1].src = "Coat_W2S.jpg";

slides[1].scr = "Coat_W2S.jpg";
Click to expand...

again ------^^^

But it's probably better to put the image src attributes in an array and
load from there:

var slideSrcArray = ['Bag_W4S.jpg', 'Coat_W2S.jpg'];
var slideArray = [];
for (var i=0, len=slideSrcArray.length; i<len; ++i){
slideArray = new Image();
slideArray.src = slideSrcArray;
}

Now you just add/remove images in the src array and the slideshow is
modified.

j = 0;
Click to expand...

It's not good to use counters as global variables, it's very easy to get
them mixed up with what should be local variables. Below shows how to
keep it local.

alert("**in test area 2");

Function runSlides()
Click to expand...
--^

Fix the syntax error and pass j to the function:

function runSlides(j)
{
var j = j || 0;


Just in case j isn't passed to the function.

{
document.images.slides.src = slides[j].src;
Click to expand...

You need to set the new src later in the script.
j = j + 1;
Click to expand...

++j or j+=1 would be better, but not needed (see below)
if (document.all)
Click to expand...

Why test for document.all when what you really want to test for is
support for filters and style object:

var imgObj = document.images.slides;
var imgFilter;
if ( (imgFilter = imgObj.style)
&& (imgFilter = filters)
{
document.images.slides.style.filter="blendTrans(duration=2)";
document.images.slides.filters.blendTrans.Apply();
}
Click to expand...

Here is where you need to set the new src.

imgObj.src = slideArray[j].src;

if (document.all)
{
document.images.slides.filters.blendTrans.Play();
Click to expand...


Test for filters, not document.all - do you *know* whether all browsers
with (detectable) support document.all also support IE's filters?

if (imgObj.filters){
imgObj.filters.blendTrans.Play();
}

}
if (j >= 1)
{
j=0;
}
Click to expand...

Set j depending on the length of your images array:

j = ++j % slideArray.length;

t = setTimeout('runSlides()', 5000);
Click to expand...

t is only needed if you intend stopping the slideshow.

[...]
There seems to be a basic problem as the two "test" alerts never happen. If
Click to expand...

That indicates basic syntax errors that stop the script from running at
all. Use Firefox/Mozilla/Netscape and use the JavaScript console to
find errors.

they did, does the code look correct? I would greatly appreciate any help
as this is due VERY shortly and I just wanted to add this extra touch.
Click to expand...

There's a working version below. IE users will see the fade transition,
other users will just see the images swap from one to the next.

Where can I find out what the "blendTrans," "style.filter" v. "filters" and
questions like that?
MSDN:

<URL:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp
Click to expand...

<URL:
http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp >



<head>
<title></title>
<script type="text/javascript">

var slideSrcArray = ['a.jpg','b.gif'];
var slideArray = [];
for (var i=0, len=slideSrcArray.length; i<len; ++i){
slideArray = new Image();
slideArray.src = slideSrcArray;
}

function runSlides( j )
{
var j = j || 0;
var imgObj = document.images && document.images.slides;
if (!imgObj) return;
if ( imgObj.style && imgObj.filters ) {
imgObj.style.filter = "blendTrans(duration=2)";
imgObj.style.filter = "blendTrans(duration=crossFadeDuration)";
imgObj.filters.blendTrans.Apply();
}

imgObj.src = slideArray[j].src;

if (imgObj.filters){
imgObj.filters.blendTrans.Play();
}

j = ++j % slideArray.length;
setTimeout('runSlides(' + j + ')', 3000);
}
</script>
</head>
<body onload="runSlides();">

<img src="b.gif" alt="LWE Spiritwear" width="100" height="75"
name="slides" id="slides">

</body>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Help With a Script 5
Help with my responsive home page 2
Slide Show 1
I keep getting this error when im trying to show category name. 0
Troubles with Fullpage / please help 0
Slideshow not working properly 2
Only one table shows up with the information 2

Members online

Total: 32 (members: 4, guests: 28)
Robots: 323

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top