Wo baue ich CSS und JS Befehl ein

  • 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

  • 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:

    Das kommt auch in HEAD-Bereich zwischen folgende Tags:

    HTML
    <style type="text/css">
    * HIER STEHT DER CSS CODE *
    </style>
  • 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>

    <script type="text/javascript" src="slideshow.js">
    </script>

    <style type="text/css">
    #slideshow {
    height:240px; /* hier Hoehe der Slideshow-Bilder angeben */
    position:relative;
    }
    #slideshow img {
    display:none;
    position:absolute;
    top:0; left:0;
    }
    #slideshow img.start {
    display:block;
    }
    </style>
    </head>

    <body>

    <div id="slideshow">
    <img class="start" src="../../Desktop/http://www.emscherwetter.de/bilder/webcam/cam1.jpg" />
    </div>

    </body>

    </html>


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

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


    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 ?

  • 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.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • :lol:
    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...

  • 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.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • 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.

  • 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.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • 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.

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


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

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • 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 ?

    Einmal editiert, zuletzt von Baumeister (12. Februar 2010 um 22:41) aus folgendem Grund: Falscher Text

  • 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.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

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

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!