Eksempler
>
Bildegalleri
>Slideshow
Slideshow
Vevsiden
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bilde sekvens</title>
<link href="auto.css" rel="STYLESHEET" />
<script type="text/javascript" src="auto.js"> </script>
</head>
<body onload="init()">
<h2 class="printhide">Slideshow</h2>
<div id="hilitedimg" style="height:560px;text-align:center">
<p>
<img src="wait.gif" alt="Starter straks"/>
</p>
</div>
<div class="printhide">
<p id="toggle" onclick="toggleShow()" class="mybutton">
Start
</p>
<hr/>
<p>
<a href="javascript:history.back()">Tilbake</a>
</p>
</div>
</body>
</html>
Javascriptet
Løsningen er basert på at vi laster inn en randomisert liste av bilder. Dette gjøres i JSON-format når siden lastes, funksjonen init. Hvordan JSON-formatet brukes går fram av funksjonen: processJSON nedenfor.
Denne løsningen innebærer at den tilfeldige rekkefølgen gjentar seg. Det er lett å modifisere Javascriptkoden slik at vi får en ny tilfeldig liste når den første er "oppbrukt".
Funksjonene toggleShow og Show tar seg av selve bildevisningen. De resterende funksjonene realiserer AJAX.
var imList=null;
var currentNr=0;
var stopped=true;
var delay=4000;
var scriptURL='<scriptadressen>';
var imageCatalog='<absolutt adresse på tjeneren>';
var imageURL='<absolutt url ti bildekatalogen>';
function establishRequest()
{
var theRequest=null;
if (window.XMLHttpRequest)
theRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
{
try { theRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
theRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
theRequest=null;
}
}
}
else
theRequest=null;
return theRequest;
}
function postRequest(theRequest,params,theURL)
{
theRequest.onreadystatechange =
function( ) {
processJSON(theRequest);
};
theRequest.open("POST", theURL,true);
theRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
theRequest.setRequestHeader("Content-length", params.length);
theRequest.setRequestHeader("Connection", "close");
theRequest.send(params);
}
function processJSON( aRequest)
{
if (aRequest.readyState == 4) {
if ((aRequest.status == 200) || (aRequest.status == 304))
{
try{
p = eval("(" +aRequest.responseText+")");
imList=p.imList;
toggleShow();
}
catch(ex){
document.getElementById('hilitedimg').innerHTML=
'Finner ingen bilder';
}
}
else
alert("Problems accessing data:\n" + aRequest.statusText);
}
}
function doRequest(theURL,params)
{
var myRequest=establishRequest();
if (myRequest)
{
postRequest(myRequest,params,theURL);
}
else
{
alert('Nettleseren nekter � hente data');
}
}
function toggleShow()
{
if(stopped)
{
stopped=false;
show()
document.getElementById('toggle').innerHTML='Stopp';
}
else
{
stopped=true;
document.getElementById('toggle').innerHTML='Start';
}
}
function show()
{
if (!stopped)
{
currentNr+=1;
if (currentNr >= imList.length)
currentNr=0
imsrc=imageURL+imList[currentNr].adr;
imalt=imList[currentNr].adr;
imtag='<img src="'+imsrc+'" alt='+imalt+'"/>'
document.getElementById('hilitedimg').innerHTML=imtag;
setTimeout("show()",delay);
}
}
function init()
{
params='catalog='+imageCatalog;
doRequest(scriptURL,params)
}
Pythonscriptet
#! /usr/bin/python
"""
Scans a directory and returns a randomized list of images
use see: http://www.it.hiof.no/~borres/ml/slideshow/p-slideshow.html
"""
import os,random
import cgi
import cgitb; cgitb.enable()
import operator
def buildImageList(catalog):
imageList=[]
for root, dirs, files in os.walk(catalog, topdown=False):
for name in files:
# only jpg-files
if not name.endswith('.jpg'):
continue
# drop thumbs
if name.startswith('t_'):
continue
imageList.append(name)
if len(imageList)==0:
return '{"imList":[{"adr":"Finner ingen bilder i katalogen"}]}'
random.shuffle(imageList)
T=''
for im in imageList:
T+='{"adr":"%s"},'%im
return '{"imList":[%s]}'%T[:-1]
form=cgi.FieldStorage()
print 'Content-type: text/plain\n'
#expect to find: catalog
if form.has_key('catalog'):
catalog=form['catalog'].value
print buildImageList(catalog)
else:
print '{"imList":[{"adr":"Finner ingen bilder"}]}'
Stilsettet
Stilsettet inneholder mulighet for å skrive ut bildene i ren form, uten menyer og overskrifter.
@media screen
{
body{
color: black;
font-family:"Verdana","Geneva","Arial","Times",sans-serif;
font-size:13px;
margin:5px;
text-align:center;
padding:0px;
}
.text{font-size:14px}
.dato{color:gray}
.mybutton{cursor:pointer;color:black;
background-color:#EED9B0;
border-style:solid;
border-width:thin;
margin-right:2px}
h2{background-color:#EED9B0;}
}
@media print
{
.printhide{display:none;font-size:16px;text-align:center}
}
