Wo baue ich CSS und JS Befehl ein

Baumeister

Hallo,
ich möchte auf meiner Webseite Fotos in einer Slideshow wiedergeben.
Ein passendes Script habe ich schon im Netz gefunden, eigentlich auch eine gute Anleitung dazu, siehe hier:
http://die.netzspielwiese.de/blog/javascrip…pting-slideshow

Die Bilder liegen auf dem Server in einem Ordner.

Die heruntergeladene Javascript-Datei liegt ebenfalls als "slideshow.js"
auf dem Server.

In welchem Teil meiner Webseite füge ich nun die 3 Teile ein, die dort vorgegeben sind ?

1.) <div id="slideshow">
<img class="start" src="http://www.meinedomain.de/slideshow/image-001.jpg" />
</div>

2.) <script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>

und 3.) /* 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;
}

Hier sind doch bestimmt pfiffige Programmierer, die mir dort helfen können ?

Axel

Macrosdesign

HTML

<div id="slideshow">
<img class="start" src="www.meinedomain.de/slideshow/image-001.jpg" />
</div>

Das kommt in BODY-Bereich.

HTML

<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>

Das kommt in HEAD-Bereich.

CSS CODE:

HTML

#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;
}

Alles anzeigen

Das kommt auch in HEAD-Bereich zwischen folgende Tags:

HTML

<style type="text/css">
* HIER STEHT DER CSS CODE *
</style>

Baumeister

Werde ich sofort testen, vielen Dank erst einmal...

Baumeister

Also meine Testseite sieht nun so aus:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>

<body>

</body>

</html>

Aber es tur sich rein gar nichts.
Habe ich irgendwas falsch gemacht ???

Baumeister

Sorry, habe den Fehler gefunden, als Quelle steht noch "Desktop" drin, hab's geändert und es läuft.

Vielen Dank

Baumeister

Zu früh gefreut.
Also nochmal.
Die Bilder liegen im Bilderordner und heissen "cam1", "cam2", usw. bis "cam20"

Laut Script soll die Show mit Bild 1 anfangen und mit 20 aufhören.

Das Script sieht folgendermaßen aus:

/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html

modifiziert von Franziska Maelzer: http://die.netzspielwiese.de/blog/javascrip…pting-slideshow
*****/

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.emscherwetter.de/bilder/webcam/cam"; geschwindigkeit=3000;

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 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]);
}
}

Auf meiner Testseite passiert aber nur das: Das erste Bild wird aufgerufen und angezeigt, dann wird nur etwas aufgerufen, aber nichts angezeigt,
siehe hier:

http://www.emscherwetter.de/test.html

HAt noch jemand ein gutes Auge für den Fehler ?

Tobse

Also erstmal:
Siehe den EDIT-Button.
Zweitens: Deinen Namen finde ich bezüglich deinem Topic etwas unpassend
Drittens: Benutze BB-Codes wie [code ]aj[/ code]
Viertens: Befolge alle angaben auf der Script-Seite nochmal, einfach von Anfang an, und achte darauf, dass du ALLES genauso machst wie dort beschreiben.
Das müsste helfen, ansonsten nochmal melden.

Baumeister

Okay, mit dem Namen gebe ich dir Recht, der bezieht sich aber nicht auf Erstellen der Webseiten.

Im Moment stehe ich auf dem Schlauch.
EDIT-Button ??????
Und ich meine alles so gemacht zu haben, wie es dort steht.
Ich habe alles schon dreimal quergelesen.
Und wenn man auf der Seite liest, scheinen alle davon begeistert zu sein.

Ich bin etwas ratlos...

Tobse

dann ist das Script evtl. doch nich so gut, wie er es dort anpreist.
Auf der Seite selbst, ist doch auch eine Slideshow mit dem Script. Evtl. kann man vergleichen.
Ich versuch das jetzt mal selber anzuwenden.

Baumeister

Ich danke dir schon mal, das du dir zeit nimmst

Tobse

Hm, also bei mir klappts
http://thememania.bplaced.net/links/slideshow/test.html

Baumeister

Ich habe in deinem Quelltext gesehen, das deine Bilder auch mit den nummern 001, usw enden.

Meine enden mit 1, 2, usw.
Das ist vom Programm (ein Webcamprogramm) so vorgegeben.

Kann das daran liegen ?
Ansonsten ist doch alles gleich.

Tobse

wenn sonst alles gleich ist, MUSS es daran liegen.
Dann musst du wohl oder übel die Bilder umbenennen oder im Webcam Programm nachd er Option suchen, die Dateinamengebung zu ändern, und die gibts, bin ich mir 100% sicher.

Baumeister

Also im Programm (VisionGS) besteht lediglich die Möglichkeit, eine Namensgebung mit Datum und Uhrzeit zu geben (cam_100212_2028.jpg).
Und die Dateiendungen auf 001 umzuzändern macht keinen Sinn, da die Dateien ja wieder vom Programm überschrieben werden. Das Programm speichert 24 Bilder (1 pro Stunde) auf dem Server und die möchte ich eben als Sildeshow wiedergeben.
Kann man das nicht im Programm ändern ?
Also ich bin nicht fit in Javascript, gebe ich offen zu.

Tobse

Is auch keine Schande.
Pack das folgende einfach in deine Slideshow.js, bei mir hats geklappt:

Code

/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com


Please leave this notice intact. 


Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html


modifiziert von Franziska Maelzer: http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-scripting-slideshow
*****/


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=9;
bilderPfad="bilder/wall";
geschwindigkeit=3000;


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 + "2.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 + (aktuell+3) + ".jpg";
        bilder[aktuell+2].xOpacity = 0;
        d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
    }
}

Alles anzeigen

P.S.: Natürlich wieder editieren, wie auf der Seite beschreiben

Baumeister

Absolut

Klasse hinbekommen, Kompliment.
Du bist ja richtig gut drauf in Sachen Programmiersprachen, bis dahin ist's noch ein weiter Weg für mich.
Ich habe das mal eben durchlaufen lassen und dabei ist mir aufgefallen, dass der Rückblick auf die letzten Stunden auch rückwärts abläuft, da das Webprogramm das aktuelle Bild immer als Datei "cam1" abspeichert.
Wenn ich mit der Slideshow mit dem Bild vor 24 Stunden anfangen will,
müßte ich also mit Bild "cam144" (6 Bilder pro Stunde x 24h) anfangen und mit Bild "cam1" enden.
Kannst du das vielleicht auch noch hinbekommen ?

Tobse

ich kanns bei 144 Starten lassen, aber es bei cam1 aufhören zu lassen, würde mich das ganze script ändern lasen müssen(:P). Tut mri leid, da kann ich nix machen.

Baumeister

Trotzdem danke und einen zweiten Königsstern für dich.

Tobse

Thx, ´freut mich das do so glücklich bist
Ich helf immer gern weiter