Slideshow template listings
index.tpl
#templatefile -v "1.0" -n "slideshow template" -d "Generates slideshow array."
define exportFileName index.html
define shadowedThumbnails 0
define imageWidth 250
define imageHeight 250
define thumbnailWidth 250
define thumbnailHeight 250
include header.html
loop images.html
include startcaptions.html
loop captions.html
include startwidths.html
loop widths.html
include startheights.html
loop heights.html
include footer.html
loop footer1.html
include footer2.html
copy assets\
header.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow template</title><script>
<!-- loosely based on code from http://www.codelifter.com -->
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 6000;// Duration of crossfade (seconds)
var crossFadeDuration = 3;// Specify the image files
var Pic = new Array(
images.html
"<%itemLargeImage%>" <%if isNextImage%>,<%endif%>
startcaptions.html
);
var captions = new Array(
captions.html
"<%itemCaption%>" <%if isNextImage%>,<%endif%>
startwidths.html
);
var widths = new Array(
widths.html
"<%itemWidth%>" <%if isNextImage%>,<%endif%>
startheights.html
);
var heights = new Array(
heights.html
"<%itemHeight%>" <%if isNextImage%>,<%endif%>
footer.html
);
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow(){
var myDiv = document.getElementById("slide");
if (document.all){ myDiv.style.filter="blendTrans(duration=2)" ;myDiv.style.filter="blendTrans(duration=crossFadeDuration)";
myDiv.filters.blendTrans.Apply();}
document.images.SlideShow.src = preLoad[j].src;
document.images.SlideShow.title = captions[j];
document.images.SlideShow.width = widths[j];
document.images.SlideShow.height = heights[j];document.getElementById("caption").innerHTML = captions[j];
if (document.all) {myDiv.filters.blendTrans.Play()};
j = j + 1;
if (j > (p-1)) j=0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}</script>
<link rel="stylesheet" href="style.css" type="text/css" /></head>
<body onload="runSlideShow()">
<div id="slide">
footer1.html
<%if isFirstImage%> <img src="<%itemLargeImage%>"
width="<%itemWidth%>" height="<%itemHeight%>" title="<%itemCaption%>" name="SlideShow" />
<div id="caption"><%itemCaption%></div>
<%endif%>
footer2.html
</div>
</body>
</html>
style.css (in folder assets)
body {margin-top: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #000000}
A {color: #999999;}
A:hover {COLOR: #804c4c; }
A:visited {color: #999999;}
.textsm {
font-size: 14px; COLOR: #ffffff;}
.textbg {
font-size: 20px; COLOR: #ffffff; }
.textreg {
font-size: 12px; COLOR: #999999; }
.textcap {
font-size: 10px; COLOR: #999999; }
.textright {
font-size: 12px;
color: #999999;
float: right;
clear: none;
margin-right: 5px;
}
#slide {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
width: 300px;
height: 300px;
float: left;
font-size: 10px; color: #999999;
clear: none;
}
.photo {
float: left; width: 800px;font-size: 12px; color: #bbbbbb; }
.photo img { float: left; margin-right: 7px}