Forum Moderators: open
Currently there are three infopanes that loop -- but also at bottom of pane is "back" and "next" link to give users control.
From my reading, it appears that the flipping is not .gif nor Flash but javascript + CSS, for which I have very limited knowledge.
I would appreciate if anyone could handhold me thru' the process of understanding the javascript and making this work. Thanks.
Newbie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
fadeStep=10; // Size of the fade "step". Must be a multiple of 100.
fadeInterval=10; // Amount of time in-between the increments of fadingreadingTime=7; // Amount of time the user has to see the image (seconds)
images=new Array("1.jpg : 1.html : Caption 1","2.jpg : 2.html : Caption 2","3.jpg : 3.html : Caption 3");
/* Do not edit the following variables */
var currTransp=100;
var currDir=0;
var currNum=0;function nextSlide()
{
currNum++;
if(currNum == images.length)
{
currNum=0;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
document.getElementById("disp-slide-cap").innerHTML=images[currNum].split(" : ")[2];}
function prevSlide()
{
currNum--;
if(currNum == -1)
{
currNum=images.length-1;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
document.getElementById("disp-slide-cap").innerHTML=images[currNum].split(" : ")[2];
}function fadeSlide()
{john=window.setTimeout("fadeSlide()", fadeInterval);
if(currTransp == 100 - fadeStep && currDir == 1)
{
window.clearTimeout(john);
}if(currTransp < 0)
{
currTransp=0;
}if(currTransp > 100)
{
currTransp=100;
}if(currDir==0 && currTransp > 0)
{
currTransp=currTransp-fadeStep;if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
document.getElementById("disp-slide-cap").style.MozOpacity=currTransp/100;
}if(navigator.appName=="Microsoft Internet Explorer")
{
document.getElementById("disp-slide").style.filter="alpha(opacity="+currTransp+")";
document.getElementById("disp-slide-cap").style.filter="alpha(opacity="+currTransp+")";
}}
else if(currDir==1 && currTransp < 100)
{
currTransp=currTransp+fadeStep;if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
document.getElementById("disp-slide-cap").style.MozOpacity=currTransp/100;
}if(navigator.appName=="Microsoft Internet Explorer")
{
document.getElementById("disp-slide").style.filter="alpha(opacity="+currTransp+")";
document.getElementById("disp-slide-cap").style.filter="alpha(opacity="+currTransp+")";
}}
else if(currDir==0 && currTransp == 0)
{
currDir=1;
nextSlide();
}if(currDir==1 && currTransp == 100)
{
window.setTimeout("commenceFade()", (readingTime * 1000));
}}
function commenceFade()
{
currDir=0;
fadeSlide();
}window.setTimeout("commenceFade()", readingTime * 1000 );
//-->
</script>
</head><body>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center>
<td height=240 colspan=2><A id="disp-link" href="1.html">
<img id="disp-slide" width=320 height=240 border=0 hspace=0 vspace=0 alt="" src="1.jpg" style="-moz-opacity:1;filter:alpha(opacity=100)">
</A>
<br>
<DIV id="disp-slide-cap" style="font-size:24pt">Caption 1</DIV></td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table></body>
</html>
