Baumeister
Neues Mitglied
Hallo,
ich möchte meine Webcambilder, die auf dem Server archiviert werden, als Slideshow anbieten.
Ich habe ein Script gefunden, was mir jedoch Kopfschmerzen bereitet.
Ich habe es von der Seite:
DOM-Scripting-Slideshow die Netzspielwiese
Dort ist auch eine schöne Einbauanleitung, doch bei mir klappt es nicht.
Die Sache besteht aus einem JS-Element, welches ich als "slideshow.js" auf dem Server abgelegt habe.
Dann sind noch die Elemente:
<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>
Das habe ich im <head> eingebaut, genau wie dieses hier:
<style type="text/css>
/* SLIDESHOW */
#slideshow {
height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
position:relative;
}
#slideshow img {
display:none;
position:absolute;
top:0; left:0;
}
#slideshow img.start {
display:block;
}
</style>
Und das "slideshow.js" Script.
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
[email protected]
Please leave this notice intact.
Rewrite of old code found here: slayeroffice | photo fade
modifiziert von Franziska Maelzer: DOM-Scripting-Slideshow die Netzspielwiese
*****/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false; bilderAnzahl=20; bilderPfad="http://www.meinedomain.de/bilder/webcam/cam"; geschwindigkeit=1000;
function so_init() {
if(!d.getElementById || !d.createElement)return;
// erstes Bild wird eingelesen
bild = d.getElementById("slideshow").getElementsByTagName("img");
bilder[0] = bild[0];
bilder[0].style.display = "block";
bilder[0].xOpacity = .99;
bilder[1] = new Image();
bilder[1].src = bilderPfad + "002.jpg";
bilder[1].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[1]);
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
}
function so_xfade() {
cOpacity = bilder[aktuell].xOpacity;
nIndex = bilder[aktuell+1]?aktuell+1:0;
nOpacity = bilder[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
bilder[nIndex].style.display = "block";
bilder[aktuell].xOpacity = cOpacity;
bilder[nIndex].xOpacity = nOpacity;
setOpacity(bilder[aktuell]);
setOpacity(bilder[nIndex]);
if(cOpacity<=0) {
bilder[aktuell].style.display = "none";
aktuell = nIndex;
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
function neuesBild() {
// immer ein Bild vorausladen
if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
bilder[aktuell+2] = new Image();
bilder[aktuell+2].src = bilderPfad + "0" + ((aktuell+3)<10 ? "0" + (aktuell+3) : (aktuell+3)) + ".jpg"
bilder[aktuell+2].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
}
}
In der Beschreibung ist immer von den Bildendungen mit einer dreistelligen Nummer "xyz-001.jpg" die Rede.
Meine Bilder enden aber nur mit xyz1.jpg
Das kann ich im Webcamprogramm auch nicht umstellen.
Ich habe die Testseite mal online gestellt:
Ohne_Titel_1
Es erscheinen 2 Bilder, dann ist Schluss.
Es sollen aber 20 wiedergegeben werden.
Hat da jemand den Durchblick ??
ich möchte meine Webcambilder, die auf dem Server archiviert werden, als Slideshow anbieten.
Ich habe ein Script gefunden, was mir jedoch Kopfschmerzen bereitet.
Ich habe es von der Seite:
DOM-Scripting-Slideshow die Netzspielwiese
Dort ist auch eine schöne Einbauanleitung, doch bei mir klappt es nicht.
Die Sache besteht aus einem JS-Element, welches ich als "slideshow.js" auf dem Server abgelegt habe.
Dann sind noch die Elemente:
<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>
Das habe ich im <head> eingebaut, genau wie dieses hier:
<style type="text/css>
/* SLIDESHOW */
#slideshow {
height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
position:relative;
}
#slideshow img {
display:none;
position:absolute;
top:0; left:0;
}
#slideshow img.start {
display:block;
}
</style>
Und das "slideshow.js" Script.
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
[email protected]
Please leave this notice intact.
Rewrite of old code found here: slayeroffice | photo fade
modifiziert von Franziska Maelzer: DOM-Scripting-Slideshow die Netzspielwiese
*****/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false; bilderAnzahl=20; bilderPfad="http://www.meinedomain.de/bilder/webcam/cam"; geschwindigkeit=1000;
function so_init() {
if(!d.getElementById || !d.createElement)return;
// erstes Bild wird eingelesen
bild = d.getElementById("slideshow").getElementsByTagName("img");
bilder[0] = bild[0];
bilder[0].style.display = "block";
bilder[0].xOpacity = .99;
bilder[1] = new Image();
bilder[1].src = bilderPfad + "002.jpg";
bilder[1].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[1]);
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
}
function so_xfade() {
cOpacity = bilder[aktuell].xOpacity;
nIndex = bilder[aktuell+1]?aktuell+1:0;
nOpacity = bilder[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
bilder[nIndex].style.display = "block";
bilder[aktuell].xOpacity = cOpacity;
bilder[nIndex].xOpacity = nOpacity;
setOpacity(bilder[aktuell]);
setOpacity(bilder[nIndex]);
if(cOpacity<=0) {
bilder[aktuell].style.display = "none";
aktuell = nIndex;
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
function neuesBild() {
// immer ein Bild vorausladen
if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
bilder[aktuell+2] = new Image();
bilder[aktuell+2].src = bilderPfad + "0" + ((aktuell+3)<10 ? "0" + (aktuell+3) : (aktuell+3)) + ".jpg"
bilder[aktuell+2].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
}
}
In der Beschreibung ist immer von den Bildendungen mit einer dreistelligen Nummer "xyz-001.jpg" die Rede.
Meine Bilder enden aber nur mit xyz1.jpg
Das kann ich im Webcamprogramm auch nicht umstellen.
Ich habe die Testseite mal online gestellt:
Ohne_Titel_1
Es erscheinen 2 Bilder, dann ist Schluss.
Es sollen aber 20 wiedergegeben werden.
Hat da jemand den Durchblick ??
