Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Help with a slide show

Reply
Thread Tools

Help with a slide show

 
 
ATS
Guest
Posts: n/a
 
      11-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(du ration=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


 
Reply With Quote
 
 
 
 
ATS
Guest
Posts: n/a
 
      11-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


 
Reply With Quote
 
 
 
 
Mick White
Guest
Posts: n/a
 
      11-28-2005
ATS wrote:

> 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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      11-29-2005
ATS wrote:
> 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:

<script type="text/javascript">

>
> 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[i] = new Image();
slideArray[i].src = slideSrcArray[i];
}

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


>
> j = 0;


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()

--^

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;


You need to set the new src later in the script.

> j = j + 1;


++j or j+=1 would be better, but not needed (see below)

> if (document.all)


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(du ration=2)";
> document.images.slides.filters.blendTrans.Apply();
> }


Here is where you need to set the new src.

imgObj.src = slideArray[j].src;


> if (document.all)
> {
> document.images.slides.filters.blendTrans.Play();



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


Set j depending on the length of your images array:

j = ++j % slideArray.length;


> t = setTimeout('runSlides()', 5000);


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


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.


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/a...ies/filter.asp
>


<URL:
http://msdn.microsoft.com/workshop/a.../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[i] = new Image();
slideArray[i].src = slideSrcArray[i];
}

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>


--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[ANN] Slide Show (S9) Gem V0.6 - New and Improved Support for UsingYour Own Slide Show Templates Gerald Bauer Ruby 0 08-26-2008 08:12 PM
get all word of slide through aspose.slide akshar108 via DotNetMonster.com ASP .Net 0 10-30-2007 04:49 AM
Slide-in & slide-out Scroller Help! banyan Javascript 0 11-16-2005 08:05 AM
Good slide scanning service vs. good slide scanner for Do-It-Yourself? LAshooter Digital Photography 0 06-25-2005 07:14 AM
please help - photo slide show software packages agirl Digital Photography 4 03-14-2005 09:01 AM



Advertisments