473,602 Members | 2,751 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Help with a slide show

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="javas cript">

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

slides = new Array();
slides[0] = new Image();
slides[1] = new Image();
slides[0].scr = "Bag_W4S.jp g";
slides[1].scr = "Coat_W2S.j pg";

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.f ilter="blendTra ns(duration=2)" ;
document.images .slides.filters .blendTrans.App ly();
}
if (document.all)
{
document.images .slides.filters .blendTrans.Pla y();
}
if (j >= 1)
{
j=0;
}
t = setTimeout('run Slides()', 5000);
}
</script>

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

</head>

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

<img src="Hat2_G2S.j pg" 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.filt er" v. "filters" and
questions like that?

Lee
Nov 28 '05 #1
3 1839
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
Nov 28 '05 #2
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
Nov 28 '05 #3
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="javas cript">
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.jp g";
Image objects have a src attribute, not scr:

slideArray[0] = new Image();
slideArray[0].src = "Bag_W4S.jp g";
slideArray[1] = new Image();
slideArray[1].src = "Coat_W2S.j pg";

slides[1].scr = "Coat_W2S.j pg";
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=slideSrcArr ay.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.f ilter="blendTra ns(duration=2)" ;
document.images .slides.filters .blendTrans.App ly();
}
Here is where you need to set the new src.

imgObj.src = slideArray[j].src;

if (document.all)
{
document.images .slides.filters .blendTrans.Pla y();

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.leng th;

t = setTimeout('run Slides()', 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.filt er" 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=slideSrcArr ay.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.fi lter = "blendTrans(dur ation=2)";
imgObj.style.fi lter = "blendTrans(dur ation=crossFade Duration)";
imgObj.filters. blendTrans.Appl y();
}

imgObj.src = slideArray[j].src;

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

j = ++j % slideArray.leng th;
setTimeout('run Slides(' + j + ')', 3000);
}
</script>
</head>
<body onload="runSlid es();">

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

</body>
--
Rob
Nov 29 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
3463
by: Al Davis | last post by:
Note: I tried cross-posting this message to several newsgoups, including comp.lang.perl.misc, c.l.p.moderated, comp.infosystems.www.authoring.cgi, comp.lang.javascript and comp.lang.php. Nothing appeared on my news server, so I'm trying again - this time posting a separate copy of the message to each group. I'm thinking this should be fairly easy to accomplish - a quick and dirty ... what? ... script? program?
9
12389
by: Michael Burtenshaw | last post by:
I would like to make a slide show using random images. The problem is my host is 250.com, and they don't support cgi-programs. Is there another way to accomplish random images?
7
3049
by: 7mary4 | last post by:
I am working on a kiosk for a museum, we will be using firefox as the browser, with windows, and a touch screen. We'd like to create a slide show of a small portfolio when the visitors click down to the lowest level of the collection. For instance, after choosing Africa, then Sudan, they will choose what they would like to look at: jewelry, tapestry, metals, etc. When they choose tapestry, there will be groups of ten thumbnails. These...
3
4021
by: Wazz Up | last post by:
Hi, I'm trying run an image slide show where the images rotate once each, then after the last image in the array has been displayed for the specified amount of time, a redirection to another page occurs. The problem I'm having is that the redirection happens as soon as the last image is displayed. Here's an example of a normal version where the images rotate continuously and the redirect version that isn't working properly:
7
3058
by: Rudy | last post by:
Hello All! After working in the television industry, moving to a developing career has been interesting to say the least. 3 years of developing with books, and the help of you fine folks on this forum, I have learned quite a bit. But that doesn't mean anything when your looking for your first developing gig. 15 years in television production, and not having a college degree in Computer Science does not make me a very good prospect....
1
1466
by: Bill | last post by:
I would like to know if anyone can tell me how to make a flash slide show jump to a new url? In other words, when the slide show concludes I would like to redirect to another web page. Any help would great. Thanks!
0
1804
by: cheenusri | last post by:
Hello friends, i am running slide show(pps file) in vb.net form using webbrowser control in it.while running the form, if right click on the slide, it show some popup menu, here i wan to disable all mouse click events on slide show which is inside the webbrowser control, i tried all the ways, but cant disable it.If anyone know the result ,please give me the solutions....
1
13912
by: mumbaisalsa | last post by:
hi all, i want to run the slide show say ten slides and then close it , but in my code given below it opens the slide show and closes immediately ... .. please give me a solution to this problem 1. Please add MsPowerpoint11.0 object present in COM in ur references. 2. Code : -- Dim appPowerpoint as Powerpoint.Application
2
2133
by: vineetbindal | last post by:
Hi all, We have a slide show in a page which shows slids rotating after every 8-10 seconds with some descriptions about them. The problem is if the connection speed is slow then the page loads fine but that slide show takes a lot of time to load and (the place we are running the slide show is white blank page till than) I dont understand why. can someone tell me what can we do for this. i have think of something like
0
2016
by: impin | last post by:
i have a created a blog in blogspot. i want add a photo slide show in the blog... so i created a photo slide show using flash, xml and style sheets with my own photos... is it possible to add the slide show to the blog? we can add slide shows through flickr, photbucket... i dont want to add photos through tat.. is it possible to add my own slide show to the blog?
0
7993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
7920
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8404
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8054
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
6730
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
5867
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5440
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
1510
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1254
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.