Ultimate Fade-in slideshow - not yet Ultimate for me

[scoop_hk]

1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I have combed thru the forum for a solution and I am sure I must be missing something simple. (Code is not my strong point = an understatement!)

I have set up 4 slide shows - my last attempt was to try to name the divs they are in but that didn't seem to help either.

this is the non working page:
http://www.creativeartlink.com//tlji..._index14c.html

this is a working version but with another script that only supports one slideshow per page....
http://www.creativeartlink.com//tlji..._index14a.html

thank you....!

/s

[scoop_hk]

Hi,

not sure what was wrong. i began to play with the swiss army slideshow and tho it worked i wasn't able to kill the buttons so i went back to square one and recopied the scripts from ultimate fade-in.... and they are working!
thank you for this it is the best!

/s

[jscheuer1]

As far as Swiss Army goes, just use the:

slides.no_controls=1;

and the:

slides.no_added_linebreaks=1;

properties for each array of images. Example for one array:

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own. 
slides[0] = ["photo1.jpg", "Kissing Fools"];
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_controls=1;
slides.no_added_linebreaks=1;

See the:

Configuration Options

section of the Swiss Army demo page for other options.

[scoop_hk]

thank you - i see what i did wrong. i didn't add those controls under the section i was using - i assumed that changing true to false at the beginning of the script would be enough - and of course using '0's instead of 1s was backwards.

now that i have 'ultimate' working i may stay with it - the only thing that would get me to change is if swiss army can open with a full on image instead of a fade in. can it?

also as long as you were kind enough to respond.... i put a separate preloader (onparse) into my header - but the one slideshow with 7 images takes far longer to begin than the other 3 that contain 3 images.... anyway around that or is 3 really an optimal number.

Thank You!!

/s

[jscheuer1]

First of all, you shouldn't edit the main script file if you don't absolutely have to.

Preloading takes just as long as loading, sometimes longer - if the image is called for before it is finished preloading. The advantage with Swiss Army in this department is that it incrementally preloads and waits until a particular image is preloaded before calling it (instead of waiting until all images are preloaded before calling any, as Ultimate Fade does). As long as your image files aren't too many bytes, this will really smooth out that part of the situation. If the images are really huge though, there is no getting around waiting for them to load unless they are preloaded on a previous page and preloading is skipped altogether on the slide show page. It is hard to guarantee preloading on a previous page without some type of progress bar preload script. To do all of that is complicated and probably unnecessary anyway.

Now, on to starting the Swiss Army with no initial fade. Use these properties for a each show:

slides.no_controls=1;
slides.no_added_linebreaks=1;
slides.nofade=1;
slides.manual_start=1;

Add this function to the script block that contains the arrays and their properties (only add it once, preferably at the bottom of that script block):

function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();
}

And for the call in the body of the page for the show, use:

<script type="text/javascript">
new inter_slide(slides)
start_it(0);
</script>

The 0 refers to which show. 0 would be the first one, 1 would be the second, and so on, for however many there are on the page.

[scoop_hk]

Thank you...
Hopefully will not be screaming for help!

[jscheuer1]

Just in case, here is the source code to my demo using two slide shows and the above outlined method:

<!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] = ["../../side/files/photo1.jpg", "<b>Heading 1<\/b><br>Kissing Fools"];
slides[1] = ["../../side/files/photo2.jpg", "<b>Heading 2<\/b><br>Seated Woman"];
slides[2] = ["../../side/files/photo3.jpg", "<b>Heading 3<\/b><br>The Dog Lovers"];
slides[3] = ["../../side/files/photo4.jpg", "<b>Heading 4<\/b><br>Standing Woman"];
slides[4] = ["../../side/files/photo5.jpg", "<b>Heading 5<\/b><br>John, Mary and Jesus - Will this wrap?"];
//optional properties for these images:
slides.no_controls=1;
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
slides.nofade=1;
slides.manual_start=1;

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own. 
slides2[0] = ["../../side/files/photo6.jpg", "Crucifix"];
slides2[1] = ["../../side/files/photo7.jpg", "Alter Boys"];
slides2[2] = ["../../side/files/photo8.jpg", "Young Pan"];
slides2[3] = ["../../side/files/photo9_thumb.jpg", "Mona Lisa"];
//optional properties for these images:
slides2.no_controls=1;
slides2.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
slides2.nofade=1;
slides2.manual_start=1;

function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();
}
</script>

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

/***********************************************
* Swiss Army Image slide show script  - © 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>
<p>
<div><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)
start_it(0);
</script></div>
</p>
<p>
<div><script type="text/javascript">
new inter_slide(slides2)
start_it(1);
</script></div>
</p>

</body>
</html>

[pinkshiro]

Hi john,

you pointed me to this thread regarding my own question about making the first image not fade in.

I'm trying to modify the code given here so that the slideshow will not display the "play/stop" button. And will not start automatically. So I still have just the one button - the "next button", and the only way to see the next image it to click next.

My first guess was to set this:

slides.manual_start=0; //' 1' should stop it from running? But it didn't

slides.no_controls=1;

This stops the slideshow from continuing. but also removes all buttons. Okay, i'm getting closer. What if I turn the controls back on and set:

slides.manual_start=0;
slides.no_controls=0;
slides.image_controls=1; //Add this in just to use my custom buttons
slides.no_auto=1; //Take away play button

Okay, theoretically this should work right? But it doesn't. It successfully stops the first picture from fading in, but it starts the slideshow...I thought no_auto would stop it from playing automatically, but it doesn't.

Even if I change Manual_start=1 - the slideshow still starts :/

[jscheuer1]

Use:

slides.manual_start=1;

That will stop it from starting, but in the other code you also have to remove (red) - the green parts could/should possibly go as well:

function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();
}

That (green and red) was there for the other person who wanted the show(s) to start automatically after a show's delay interval, and with no controls.

[pinkshiro]

Taking the green out causes the first image to fade in instead of appear.

I implemented your changes. Thankyou very much.

At first glance all works well. But I think it causes a preloading error.

If I click on next too soon, it snaps straight to image2 without a fade and then suddenly back to image1...then the next time i click next, it fades to image3 and continues normally from there.

If I wait for 5 seconds before clicking next for the first time, the script works beautifully.

Is there a way to fix this? I understand if there isn't.