Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Unable to [apply] customized CrossFadeDuration in my slideshow script 1

Status
Not open for further replies.
tanydegher2nd

tanydegher2nd

Programmer
Oct 4, 2003
7
0
0
AU
Hi everybody,
I've just downloaded a nice fade-in-image slideshow from , and seemed great and easy to customize esp for newbies like me , but the problem is ;
I want to enlarge the timeframe of the cross fade between photos, ( wanting the photo to blend slo into the other)
I Maximized the value of the CrossFadeDuration variable,nothing happened ...
Thanks for ur patience
The script is at
 
Sort by date Sort by votes
The script is the following:

Code: 
<!--

SlideShow with Captions and Cross-Fade
(C)2002 by CodeLifter.com

Shows images and accompanying captions.
Browsers: NS4-7,IE4-6
Fade effect only in IE; degrades gracefully.
NS4 shows default caption only.

INSTRUCTIONS:

Copy this entire script into a completely blank
page.  Follow the commented instructions within.

//-->

<html>

<head>

<!-- 
Set up the caption font in the following style.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: bold;
color:      #123456;
}
</style>

<!-- 
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script>

// (C) 2002 [URL unfurl="true"]www.CodeLifter.com[/URL]
// [URL unfurl="true"]http://www.codelifter.com[/URL]
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]  = 'Image001.jpg';
Picture[2]  = 'Image002.jpg';
Picture[3]  = 'Image003.jpg';
Picture[4]  = 'Image004.jpg';
Picture[5]  = 'Image005.jpg';
Picture[6]  = 'Image006.jpg';
Picture[7]  = 'Image007.jpg';
Picture[8]  = 'Image008.jpg';
Picture[9]  = 'Image009.jpg';
Picture[10] = 'Image010.jpg';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1]  = "This is the first caption.";
Caption[2]  = "This is the second caption.";
Caption[3]  = "This is the third caption.";
Caption[4]  = "This is the fourth caption.";
Caption[5]  = "This is the fifth caption.";
Caption[6]  = "This is the sixth caption.";
Caption[7]  = "This is the seventh caption.";
Caption[8]  = "This is the eighth caption.";
Caption[9]  = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>

</head>

<!--
Add the onload=runSlideShow() event call to the body tag.
//-->

<body onload=runSlideShow() bgcolor=#000000>

<!--
The following table holds the images and captions.
Place the table in your page where you want the slideshow
to appear.  Follow the instructions for each table cell.
//-->

<table border=0 cellpadding=0 cellspacing=0>
  <tr>
    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag.  Usually the first image in the Picture
    array in the script is used here.
    //-->
    <td width=350 height=280>
    <img src=Image001.jpg name=PictureBox width=350 height=280>
    </td>
  </tr>
  <tr>
    <!-- 
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
    <td id=CaptionBox class=Caption align=center bgcolor=#fedcba>
    This is the default caption.
    </td>
  </tr>
</table>

</body>

</html>

Thanks for ur patience
I strongly appreciate any reply..
 
Upvote 0 Downvote

Can anyone, just drop me a hint of what i should change, the whole script is already done and finished, just wondering of how should I make the timeframe (of the cross-fade) larger....
 
Upvote 0 Downvote

>> just wondering of how should I make the timeframe (of the cross-fade) larger....

Did you try changing the following line:

Code: 
var CrossFadeDuration = 3;

? It's the one with this comment above it:

// Set the duration of crossfade (in seconds)
Click to expand...

Haven't tried it myself, but it would appear that, given the comment, it would be the obvious choice.

Hope this helps,
Dan
 
Upvote 0 Downvote

Yes, i've changed it, yet no results, thats why im posting it here, its a strange problem that can end me by throwing myself from the 6th floor! help me! :(
 
Upvote 0 Downvote

If you change this:

Code: 
// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 1;

to read:

Code: 
// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 1;

// Set the actual fading duration
var ActualFadeDuration = 2;

And then modify the runSlideShow function to this:

Code: 
function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play(ActualFadeDuration);
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

Then you can set the ActualFadeDuration variable to control the actual fade duration.

Hope this helps,
Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
171
xwb
xwb
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
160
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
138
lexer
lexer
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
114
JScannell
JScannell
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
217
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top