PDA

View Full Version : Ultimate Fade-in slideshow (v1.51) / starting script with setTimeout



rooon
08-27-2007, 10:33 AM
1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hallo, i have following question:
excuse my english, but i´m german ;)

The script is normally starting when the page is loaded.
My problem is, that i want to start it with a function-call like this...

function startfade() {
new fadeshow(fadeimages, 375, 265, 0, 2000, 1)
}

but it dont work. i get an error.

do someone can help me how i can start the script with a function-call?

thank you for help...

greets ron


p.s. the headline is not really right. i dont need a setTimeout, i just need a function-call...

Twey
08-27-2007, 11:23 AM
I'm afraid the script uses document.write(): there's no way you can initialise it after the page has loaded.

rooon
08-27-2007, 12:01 PM
I cant believe that there is no way to to initialise the script over a function-call.
I hope there is someone who know how to do this...

greets ron in hope....

jscheuer1
08-27-2007, 01:34 PM
This script allows you to start the slide show stopped, and its buttons can then start it:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

rooon
08-27-2007, 03:04 PM
thank you for your answer...
i tried this befor i wrote my question here.
but i didnt get it to work.

i dont want see buttons on my page.
and i tried to konfigure the script with no buttons and no automatic start, but it doesnt work.

it doesnt matter if i use this script or the army-script.
so, if someone have a solution for my problem with the army-script, i would be happy.

i hope for more answers....

Greets ron

Twey
08-27-2007, 03:10 PM
<div style="display: none;">
<!-- Buttons here -->
</div>

rooon
08-27-2007, 04:01 PM
Hi Twey,

<div style="display: none;">
<!-- Buttons here -->
</div>

o.k. thats an idee.
first i have to search where javascript implementate this code, but this shouldnt be a problem.
but how do i call the function to start fading?

when i look at the source-code i can see this:

<input id="gostp0" value=" Play " onclick="iss[0].gostop(this);"

but how i call it for example from the end of a function?
i have a problem with "this" because from somewhere else "this" doesnt work.

Greets ron

jscheuer1
08-27-2007, 04:47 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "http://www.dynamicdrive.com"];
slides[1] = ["photo2.jpg", "Seated Woman"];
slides[2] = ["photo3.jpg", "The Dog Lovers"];
slides[3] = ["photo4.jpg", "Standing Woman"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus"];
//optional properties for these images:
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides.no_descriptions=1; //use for no descriptions displayed
slides.no_controls=1; //will set a slide show with no controls
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
slides.pause=1; //use for pause onmouseover
slides.use_title=1; //use for descriptions as images title attributes

</script>

<script src="swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - &#169; John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
</head>
<body>
<div style="width:140px;">
Some content
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
setTimeout(function(){iss[0].gostop();}, 15000);
</script>
Some other content
</div>
</body>
</html>

rooon
08-28-2007, 07:57 AM
Hi jscheuer1,

thank you for the trouble you have taken.
but i'm sorry to say that your solution isnīt working.

the first picture is directly fading when the page is loaded.
and then there is no further fading.

i get following errors:

- directly when the page loaded:

1.
Warning: variable el hides argument
Source file: swissarmy.js
Line: 238, Column: 4
Source Code:
var el=el? el : this.imgel;

2.
Warning: reference to undefined property this.fadeclear
Source file: swissarmy.js
Zeile: 342


and after the 15 sec. which are adjusted :

3.
Warning: reference to undefined property this.inprocess
Source file: swissarmy.js
Line: 265

But i need that the first picture is fading in after the adjusted time.
before there should be shown no picture.

It's a pity that your solution isnīt working.
i think that it is what i need.
perhaps you know how to fix the error? ;)

Greets ron

jscheuer1
08-28-2007, 09:13 AM
your solution isnīt working.
i think that it is what i need.
perhaps you know how to fix the error? ;)

Works here in IE 7, FF 2, Safari 3, and Opera 9. No errors.

Please Supply a link to your Problem Page.

To get it to show nothing onload, make the first image transparent and leave off your last image in the array:


var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["spacer.gif", "John, Mary and Jesus"]; //this will be replaced by the last image
slides[1] = ["photo1.jpg", "Kissing Fools", "http://www.dynamicdrive.com"];
slides[2] = ["photo2.jpg", "Seated Woman"];
slides[3] = ["photo3.jpg", "The Dog Lovers"];
slides[4] = ["photo4.jpg", "Standing Woman"];
//last image missing


Then in the body call:


<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides, 140, 225)
function runit(){
iss[0].gostop();
setTimeout(function(){iss[0].imgs[0][0]="photo5.jpg";}, 3000)
}
setTimeout(function(){runit()}, 5000);
</script>

The red image is the real last image.

Added Later:

I'm curious what browser was giving you all these problems?

I was just looking over those 'errors' of yours, just to see if any of them made any sense. They do, but they are not errors. They are warnings. And, as I said, the script works with no errors or warnings in the browsers mentioned. You must be using a javascript debugger or something. Those are valid warnings. But since the 'hidden' argument is used by the variable that hides it, that's no problem. The undefined property is just that. Properties don't need to be defined in javascript unless a value or method is being used from them. That particular one gets defined in time for it to be of use when needed, just not in time for it not to be undefined as the script starts. It stores a reference to the fading process, once underway.

rooon
08-28-2007, 12:08 PM
Hallo John,

thank you very very much for your help.
No it works like i want.

i did it too, that i take the first image as a white image, but than i had the problem that the wihte image would be shown when the array repeated.
but with your solution, to change the image after call, it is perfekt.
iīm very happy :)

i have to say that it did a mistake the last time, in my post before.
the change of the image is going right. i just forgott to put different images in the array. i had 5 times the same image in. so i havnīt to wonder why there is no image-fading. it just was the problem that the first image was starting directly. but with the white-picture (or clear-picture) and chaging the first image, everything works like i wish.

yeah yeah yeah... :)

thanks for your nice script and have a nice day....

greets ron

rooon
08-31-2007, 03:33 PM
Hallo all, hallo john,

i have detected a weird effekt.
when i take different sized images, i can see the next different sized image a little bit. perhaps like 1%. it seems as if the picture dont get to 0%.
the effekt can be see in all browers unless the IE / PC. opera, firefox, safari on pc or mac have the effekt.

do you know why and is there another solution like to take all picture with the same size? then i would give the pictures in photoshop white color around.

but i would find it better if i can take different sized images.
perhaps there is a solution for this problem.

you can see it in this example:

Example (http://www.beaugeois.de/test)

the code is the same as like your example.

here, on the right picture, i made in photoshop the effekt more visible:

Image (http://www.beaugeois.de/test/images/bild.jpg)

jscheuer1
08-31-2007, 04:45 PM
I tried out your example in IE 7, Opera 9, FF 2, and Safari 3 - all on the PC and didn't see it. I of course know what you are saying, and could see it in your linked image. I may not be able to see it in your example page due to my laptop's LCD display, which tends to smooth things out a little.

There is only one thing that I can think of that might cause this. Because older browsers using opacity and/or -moz-opacity had a bug that made them flash when returning to full opacity, the divisor for them was set to 101 instead of 100. That way they could never reach 100% opacity. 99% is generally close enough and the naked eye usually cannot tell the difference.

What you can do, in the swissarmy.js file, is to find all four instances of:


degree/101

and change them to:


degree/100

Since all current version browsers that do any kind of opacity (at least as far as I know) no longer have this bug, it is a pretty safe thing to do.