/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Java SlideShow With Captions

Copy linkTweet thisAlerts:
Apr 06.2008

Hi. I’m trying to add captions to an already working SlideShow, but I cannot get it to work. If I add – if (document.getElementById) document.getElementById(“CaptionBox”).innerHTML= Caption[jss]; – the SlideShow doesn’t rotate anymore. The CaptionBox shows up, but there’s no movement. Here’s the code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Welcome to My Page</title>
<style type=”text/css”>
.Caption {color: #660066;
font-family: arial;
font-size: 14px;
font-weight: bold;}
</style>
<script>
var SlideShowSpeed = 5000;
var CrossFadeDuration = 2;
var Picture = new Array();
var Caption = new Array();

Picture[1] = ‘image1.jpg’;
Picture[2] = ‘image1.jpg’;
Picture[3] = ‘image1.jpg’;
Picture[4] = ‘image1.jpg’;
Picture[5] = ‘image1.jpg’;

Caption[1] = “Caption1”;
Caption[2] = “Caption1”;
Caption[3] = “Caption1”;
Caption[4] = “Caption1”;
Caption[5] = “Caption1”;

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.SlideShow.style.filter=”blendTrans(duration=2)”;
document.images.SlideShow.style.filter=”blendTrans(duration=CrossFadeDuration)”;
document.images.SlideShow.filters.blendTrans.Apply();}
document.images.SlideShow.src = preLoad[jss].src;
if (document.getElementById) document.getElementById(“CaptionBox”).innerHTML= Caption[jss];
if (document.all) document.images.SlideShow.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout(‘runSlideShow()’, SlideShowSpeed);
}
</script>
</head>
<body onload=”runSlideShow()”>

<div align=”center”>
<table border=0 cellpadding=0 cellspacing=0>
<tr><div align=”center”><img src=/year3/images/java3easter08/easter08_1.jpg name=’SlideShow’ width=533 height=400></td></tr>
<tr><td id=CaptionBox class=Caption align=center>Let The Hunt Begin!</td></tr>
</div>
</table>
</body>
</html>

I’m really lost here and I’ve been staring at this stupid code for about 4 hours now and I cannot figure out what’s wrong. It’s probably something stupid like syntax or I forgot some text. Can anyone help me out?

Thanks.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ChelleWSUauthorApr 06.2008 — B/C neither have a cross fade or similar fading transition.
Copy linkTweet thisAlerts:
@ctozApr 06.2008 — how about an array of divs which contain image and caption?
Copy linkTweet thisAlerts:
@JMRKERApr 06.2008 — B/C neither have a cross fade or similar fading transition.[/QUOTE]
Do you have a working example of this effect?

I'm not sure of what this effect is.
Copy linkTweet thisAlerts:
@vwphillipsApr 06.2008 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst IMG{
position:absolute;left:0px;top:0px;
}

#txt DIV{
position:absolute;left:0px;top:0px;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-March-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}

function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}

zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
}
}

zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}


/*]]>*/
</script>


<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/


function zxcSS(zxcid,zxcud,zxctxtid){
var zxcp=document.getElementById(zxcid);
var zxcimgs=zxcp.getElementsByTagName('IMG');
if (!zxcimgs[0].opacityoop){
var zxctxt=document.getElementById(zxctxtid);
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
zxcimgs[zxc0].style.zIndex=(zxc0<zxcimgs.length-1)?'0':'1';
zxcBAnimator('opacity',zxcimgs[zxc0],(zxc0<zxcimgs.length-1)?10:90,(zxc0<zxcimgs.length-1)?0:100,20);
zxcimgs[zxc0].txt=(zxctxt&&zxctxt.getElementsByTagName('DIV')[zxc0])?zxctxt.getElementsByTagName('DIV')[zxc0]:document.createElement('DIV');
zxcimgs[zxc0].txt.style.zIndex=(zxc0<zxcimgs.length-1)?'0':'1';
zxcBAnimator('opacity',zxcimgs[zxc0].txt,(zxc0<zxcimgs.length-1)?10:90,(zxc0<zxcimgs.length-1)?0:100,20);
}
zxcp.cnt=zxcimgs.length-1;
setTimeout(function(){ zxcSS(zxcid,zxcud); },30);
}
else if ((zxcud>0&&zxcp.cnt-zxcud>=0)||(zxcud<0&&zxcp.cnt-zxcud<zxcimgs.length)){
zxcBAnimator('opacity',zxcimgs[zxcp.cnt],zxcimgs[zxcp.cnt].opacityoop.data[0],0,1000);
zxcimgs[zxcp.cnt].style.zIndex='0';
zxcBAnimator('opacity',zxcimgs[zxcp.cnt].txt,zxcimgs[zxcp.cnt].txt.opacityoop.data[0],0,1000);
zxcimgs[zxcp.cnt].txt.style.zIndex='0';
zxcp.cnt-=zxcud;
zxcBAnimator('opacity',zxcimgs[zxcp.cnt],zxcimgs[zxcp.cnt].opacityoop.data[0],100,1000);
zxcimgs[zxcp.cnt].style.zIndex='1';
zxcBAnimator('opacity',zxcimgs[zxcp.cnt].txt,zxcimgs[zxcp.cnt].txt.opacityoop.data[0],100,1000);
zxcimgs[zxcp.cnt].txt.style.zIndex='1';
}
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}






/*]]>*/
</script></head>

<body >
<div id="tst" style="position:relative;width:200px;height:200px;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="200" height="200" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="200" height="200" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="200" height="200" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200" />
</div>
<div id="txt" style="position:relative;width:200px;height:20px;background-Color:#FFFFCC;">
<div >Text 4</div>
<div >Text 3</div>
<div >Text 2</div>
<div >Text 1</div>
</div>
<input type="button" name="" value="Fwd" onclick="zxcSS('tst',1,'txt');"/>
<input type="button" name="" value="Back" onclick="zxcSS('tst',-1,'txt');"/>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@Mr_JApr 06.2008 — [B]ChelleWSU[/B]

Do you realise that your Picture array has all the same values as does the Caption array?

Picture[1] = 'image1.jpg';

Picture[2] = 'image1.jpg';

Picture[3] = 'image1.jpg';

Picture[4] = 'image1.jpg';

Picture[5] = 'image1.jpg';

Caption[1] = "Caption1";

Caption[2] = "Caption1";

Caption[3] = "Caption1";

Caption[4] = "Caption1";

Caption[5] = "Caption1";
Copy linkTweet thisAlerts:
@ctozApr 07.2008 — ! and if fixing them don't work, crossfade anything here

http://millstream.com.au/upload/code/crossfade/
Copy linkTweet thisAlerts:
@ChelleWSUauthorApr 07.2008 — Thanks for the Help. I got the code to work. I had transposed some lines. Thanks again for all your help! ? :p
×

Success!

Help @ChelleWSU spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...