Slideshow template listings
Here are a couple of ways to create slideshows using Picasa templates. The first uses an XML technique, the second, repeated passes on the photo list to extract the desired information.
Method 1
index.tpl
#templatefile -v "1.0" -n "Generic Slideshow w/xml Code" -d "XML-output to be read by javascript for display."
define imageWidth 250
define imageHeight 250
define thumbnailWidth 80
define thumbnailHeight 80
include imageinfo.tpl
copy assets\
imageinfo.tpl
#templatefile
define exportFileName imageinfo.xml
include header.xml
loop imagelistelement.xml
include footer.xml
header.xml
<?xml version="1.0" encoding="utf-8" ?>
<slideshow>
<album>
<albumName><%albumName%></albumName>
<albumItemCount><%albumItemCount%></albumItemCount>
<albumCaption><![CDATA[ <%albumCaption%> ]]></albumCaption>
<images>
imagelistelement.xml
<image>
<itemWidth><%itemWidth%></itemWidth>
<itemHeight><%itemHeight%></itemHeight>
<itemThumbnailImage><%itemThumbnailImage%></itemThumbnailImage>
<itemThumbnailWidth><%itemThumbnailWidth%></itemThumbnailWidth>
<itemThumbnailHeight><%itemThumbnailHeight%></itemThumbnailHeight>
<itemName><%itemName%></itemName>
<itemNumber><%itemNumber%></itemNumber>
<itemCaption><![CDATA[ <%itemCaption%> ]]> </itemCaption>
</image>
footer.xml
</images>
</album></slideshow>
index.html (in folder assets)
<!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">
<script src="slides.js" type = "text/javascript"></script>
<style type="text/css">
#slide0 {width:400px; height:400px;text-align:center;}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Read XML file to create slideshow</title>
</head><body onload="runSlideShow()">
<div id="slide0"><img src="#" id = "slideimg0" /> <div id="caption">some text</div></div>
</body>
</html>
slides.js, in folder assets
var opacity = 1, deltaOpac = 0.05, riseTime = 1, picInterval = 8, picIndex = 0, intervalId, ss = [], newPic, captions = [];
var fadeMsec = riseTime * 1000 * deltaOpac;
var prefix = "";//bring down the lights, switch images, then bring them up
function changePic(){
newPic = (picIndex + 1) % ss.length;
if(!ss[newPic].complete){return;};
intervalId = window.setInterval("fadeout()", fadeMsec);
}
function fadeout(){
if (opacity <= 0) {window.clearInterval(intervalId);
document.getElementById("slideimg0").src = ss[newPic].src;document.getElementById("caption").innerHTML = captions[newPic];
intervalId = window.setInterval("fadein()", fadeMsec);
picIndex += 1;}
else{opacity -= deltaOpac; if (opacity < 0 ) {opacity = 0;};
setOpacity(document.getElementById("slide0"),opacity);
// setOpacity(document.getElementById("caption"),opacity);
}
}function fadein(){
if (opacity >= 1) {window.clearInterval(intervalId); opacity = 1;}
else{opacity += deltaOpac; if (opacity > 1) {opacity = 1;};
setOpacity(document.getElementById("slide0"),opacity);
// setOpacity(document.getElementById("caption"),opacity);
}
}
function setOpacity(obj, opacity) {
if (opacity > 1) {opacity = 1}; if (opacity < 0) { opacity = 0};
obj.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity;}
function getImages(filename){
//get the image source filenames from the picasa xml file created by picasatry //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(filename);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", filename, false);
xmlhttp.send(null);
var xmlDoc = xmlhttp.responseXML.documentElement;
}
catch(e)
{
alert(e.message);
return;
}
}
var n = xmlDoc.getElementsByTagName("albumItemCount")[0].childNodes[0].nodeValue, images = [];
for (i = 0 ; i < n; i++){
images[i] = xmlDoc.getElementsByTagName("itemName")[i].childNodes[0].nodeValue;
captions[i] = xmlDoc.getElementsByTagName("itemCaption")[i].childNodes[0].nodeValue;
}
return images;
}
function runSlideShow() {
var myimages = getImages(prefix + "imageinfo.xml");
for (i = 0; i < myimages.length ; i++){ //load images
ss[i] = new Image();
ss[i].src = prefix + "images/" + myimages[i];
}
document.getElementById("slideimg0").src = ss[0].src;document.getElementById("caption").innerHTML = captions[0];
window.setInterval("changePic()", picInterval*1000);
}
---------------------------------------------
Method 2
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}