Help with a slide show

ATS · Nov 28, 2005

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

ATS · Nov 28, 2005

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

Any help would be appreciated.

Lee

Mick White · Nov 28, 2005

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

First, take care of your syntax errors:
scr >> src
Function >> function
Mick

RobG · Nov 29, 2005

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">

Language is deprecated, type is required:

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

slides = new Array();

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";

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";

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>

Help with code	0	Jun 12, 2022
Help With a Script	5	Jul 10, 2021
Help with my responsive home page	2	Dec 14, 2022
Slide Show	1	Jan 15, 2007
I keep getting this error when im trying to show category name.	0	Dec 26, 2023
Troubles with Fullpage / please help	0	Dec 14, 2023
Slideshow not working properly	2	Jan 7, 2023
Only one table shows up with the information	2	Mar 29, 2023

Help with a slide show

ATS

ATS

Mick White

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads