1. The following is a COMPLETE HTML document which contains a slideshow with user selectable timing delay, and a pause feature, for use with 640x480 .jpg files. Easily modifiable!
Use NotePad to create a file that contains the following:
<html xmlns:t ="urn:schemas-microsoft-com:time" >
<HEAD>
<style>.time { behavior: url(#default#time2) }
</style>
<?IMPORT namespace="t" implementation="#default#time2">
<TITLE>Photo Album</TITLE>
<script language="javascript">
var setDefaultErrImg="BlankMsg.jpg";
var setDefaultErrTxt="Blank";
var empty = 0;
var Nx = 0;
nextimage = new Image();
nextimage.src = " ";
var userdelay = "";
var tick = ""
var msg = " ";
var count = 0;
var savecount = 0;
var imgcount = 0;
function haltshow(){
if (savecount == 0){savecount = count;
count = imgcount};
}
function displayit(){
window.open(nextimage.src,"SlideShow","toolbar=0,status=1,width=640,height= 480,top=0,left=0").status = "This is " + count + " of " +imgcount;
}
function getnextimage() {
if (count < imgcount){++count};
nextimage.src = document.images[count-1].src;
displayit();
if (count < imgcount){countdown()};
}
function countdown(){
if (tick > 0){msg = tick} else{msg = "Fetching Next Image..."};
if (tick >= 0){tick = tick -1
window.status = msg;
if (savecount > 0){tick = userdelay -1;runshow()}
else{setTimeout("countdown()", 1000)}; }
else{tick = userdelay -1;
runshow(); }
}
function runshow() {
if (count < imgcount){getnextimage()};
if (savecount > 0){window.status="The Slideshow Is Paused at Image "
+savecount + " of " +imgcount + "."}
if (count == imgcount){convert();
if (savecount > 0){count=savecount-1;
savecount=0
window.open("pausemsg.html","SlideShow");}
else{count=0
window.status="The Slideshow Is Complete."};
}
}
function initShow(ImgCnt,Blank,Dn){
imgcount = ImgCnt-Blank;
userdelay = Dn;
tick = userdelay-1;
convert();
runshow();
}
function convert() {
var inputColl = document.all.tags("INPUT");
if (inputColl!=null && inputColl.length>0) {
var range = inputColl[0].createTextRange();
if (savecount > 0){range.text = "Resume"}
else{range.text ="Start Slideshow"};
}
}
function FillBlank(n){
document.images[n].src = setDefaultErrImg;
document.images[n].setAttribute("alt",setDefaultErrTxt);
++empty
}
function statusmsg(){
window.status="Done"
}
function getInterval(){
if (document.IGroup.interval[0].checked=="1"){Nx = document.IGroup.interval[0].value};
if (document.IGroup.interval[1].checked=="1"){Nx = document.IGroup.interval[1].value};
if (document.IGroup.interval[2].checked=="1"){Nx = document.IGroup.interval[2].value};
if (document.IGroup.interval[3].checked=="1"){Nx = document.IGroup.interval[3].value};
if (document.IGroup.interval[4].checked=="1"){Nx = document.IGroup.interval[4].value};
if (document.IGroup.interval[5].checked=="1"){Nx = document.IGroup.interval[5].value};
if (document.IGroup.interval[6].checked=="1"){Nx = document.IGroup.interval[6].value};
if (document.IGroup.interval[7].checked=="1"){Nx = document.IGroup.interval[7].value};
if (document.IGroup.interval[8].checked=="1"){Nx = document.IGroup.interval[8].value};
}
function startShow(){
getInterval()
initShow(PixCount,empty,Nx);
}
</script>
</head>
<BODY onLoad="statusmsg()" vlink="Gray" alink="Lime" BGColor="lightyellow">
<center>
<name ="top"><font face="arial,helvetica" color="Blue" size="5">Click On An Image To Enlarge It</font>
<br>
<t:seq repeatCount="indefinite">
<t:par>
<div class="time" begin="0" dur="3" timeAction="display">Doing This Will RESET The Slideshow</div>
</t:par>
<div class="time" dur="3" timeAction="display">- ! -</div>
</t:par>
</t:seq>
<hr>
</center>
<Table width="650" Border="0" Align="center" Cellspacing="0" Cellpadding="0" >
<TR>
<TD align="center" BGCOLOR="orange">
<h3>Use The <font color="Red">BACK</font> Button To Return<br>
From The Full View</h3>
</TD>
<TD align="center" BGColor="tan">
<input type="button" name="null" value="Start Slideshow" onClick="startShow()"/>
</TD>
<TD width="3%" align="right" BGColor="yellow">
<input type="image" name="pausebtn" src="pausebtn.gif"
onclick="haltshow()" border="0" />
</TD>
</TR>
</Table>
<form name="IGroup">
<Table Width="500" align="center" Border="0" BGColor="LightBlue" Border="1">
<TR>
<TD>
Slideshow Interval:
<TD>
<input type="radio" name="interval" value="2">2
</TD>
<TD>
<input type="radio" name="interval" value="3">3
</TD>
<TD>
<input type="radio" name="interval" value="4" >4
</TD>
<TD>
<input type="radio" name="interval" value="5" checked>5
</TD>
<TD>
<input type="radio" name="interval" value="6">6
</TD>
<TD>
<input type="radio" name="interval" value="7">7
</TD>
<TD>
<input type="radio" name="interval" value="8">8
</TD>
<TD>
<input type="radio" name="interval" value="9">9
</TD>
<TD>
<input type="radio" name="interval" value="10">10
</TD>
</TR>
</Table>
</form>
<TABLE WIDTH="650" BORDER="2" ALIGN="center" CELLSPACING="2" CELLPADDING="1"
HEIGHT="113">
<!-- Row 1 -->
<TR>
<TD WIDTH="20%">
<a href="1.jpg" Name="Viewer1"><img src="1.jpg" onError="FillBlank(0)" width="120" height="90" alt ="Click to enlarge"
/></a></TD>
<TD WIDTH="20%">
<a href="2.jpg" Name="Viewer1"><img src="2.jpg" onError="FillBlank(1)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="3.jpg" Name="Viewer1"><img src="3.jpg" onError="FillBlank(2)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="4.jpg" Name="Viewer1"><img src="4.jpg" onError="FillBlank(3)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="5.jpg" Name="Viewer1"><img src="5.jpg" onError="FillBlank(4)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>
<!-- Row 2 -->
<TR>
<TD WIDTH="20%">
<a href="6.jpg" Name="Viewer1"><img src="6.jpg" onError="FillBlank(5)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
<TD WIDTH="20%">
<a href="7.jpg" Name="Viewer1"><img src="7.jpg" onError="FillBlank(6)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="8.jpg" Name="Viewer1"><img src="8.jpg" onError="FillBlank(7)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="9.jpg" Name="Viewer1"><img src="9.jpg" onError="FillBlank(8)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="10.jpg"Name="Viewer1"><img src="10.jpg" onError="FillBlank(9)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>
<!-- Row 3 -->
<TR>
<TD WIDTH="20%">
<a href="11.jpg"Name="Viewer1"><img src="11.jpg" onError="FillBlank(10)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
<TD WIDTH="20%">
<a href="12.jpg"Name="Viewer1"><img src="12.jpg" onError="FillBlank(11)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="13.jpg"Name="Viewer1"><img src="13.jpg" onError="FillBlank(12)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="14.jpg"Name="Viewer1"><img src="14.jpg" onError="FillBlank(13)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="15.jpg"Name="Viewer1"><img src="15.jpg" onError="FillBlank(14)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>
</TABLE>
<Script language="JavaScript">
var PixCount = document.images.length;
</Script>
</Body>
</HTML>
2. Save the file with a name of your choosing, making sure to give it the .html extension.
3. Use NotePad to create an HTML file which contains the following:
<HTML>
<BODY onLoad="ToFront()">
<Img SRC = "pausemsg.gif">
<script language="javascript">
function ToFront(){
window.focus();
}
</script>
</Body>
</HTML>
4. Save this file as PauseMsg.html.
5. There are three files attached:
1. 640x480 image named PauseMsg.gif
2. PauseBtn.gif
3. BlankMsg.jpg
All of these are required for the SlideShow to function properly.
6. Copy your photos to the same folder that contains the above files, and giving them consecutive names, e.g. 1.jpg, 2.jpg, etc. You must not skip any number, and you must not use a leading zero.
7. Use it!
mjh.lkwd@highstream.net
Sorry, it won't let me attach more than one file.