DOM-Scripting-Slideshow

Strandfotos

Für ein Projekt habe ich diese wunderbare JavaScript-Diashow von S.G. Chipman ein wenig modifiziert.

Fotos: pattyflylottchenhhInuitfloeckybobotPhotocase.de

Vorteile der Slideshow:

  • Eine beliebige Anzahl von Bildern kann als Slideshow eingebaut werden.
  • Es werden anfangs nur zwei Bilder vorausgeladen. Alle folgenden werden nach und nach dazu geladen (spart Ladezeiten).
  • Ist JavaScript nicht aktiviert, wird nur das erste Bild angezeigt, nicht wie im Original-Script alle Bilder untereinander. So kann die Slideshow in eine Website z.B. im Header integriert werden und sieht dann auch noch gut aus, wenn JavaScript deaktiviert ist.
  • Die Slideshow ist in unaufdringlichem JavaScript geschrieben, was sie sehr flexibel macht.
  • Der (X)HTML-Quellcode ist standardkonform und semantisch korrekt aufgebaut.

Slideshow einbinden

1.

Bilder für die Slideshow erstellen und nummeriert mit Endung 001.jpg bis 00x.jpg in einem Ordner auf dem Webserver speichern.

z.B. http://www.meinedomain.de/slideshow/image-001.jpg usw.

2.

Erstes Bild der Slideshow mit class="start" in div-Container mit ID “slideshow” mit folgendem Code in die Seite einfügen:

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

Danke Fabian Meyer. Er hat mich darauf hingewiesen, dass das Startbild nur sicher angezeigt wird, wenn es mit http://… geschrieben wird.

3.

Slideshow-JavaScript-Datei downloaden »

4.

JavaScript-Datei anpassen:

Die folgenden Variablen am Anfang des Scriptes nach eigenen Bedürfnissen definieren:

bilderAnzahl=5;
bilderPfad="http://www.meinedomain.de/slideshow/image-";
geschwindigkeit=3000;

Für bilderAnzahl die Anzahl der Slideshow-Bilder angeben.
Bei bilderPfad den absoluten Pfad zu den Slideshow-Bildern angeben und zwar bis zu dem Zeichen, welches vor der Nummerierung 00x.jpg steht (s. Beispiel oben).
Für geschwindigkeit die Zeit zwischen den Überblendungen in Millisekunden angeben, also für 1 Sekunde 1000.

5.

JavaScript-Datei einbinden:

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

6.

Folgendes CSS in die Stylesheet-Datei der Website einbinden:

/* 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;
}

7.

Slideshow bewundern!

PS:
Das Script funktioniert bei mir in allen getesteten Browsern.
Falls es das irgendwo nicht tut, würde ich mich über eine Nachricht freuen!


Kommentare & Trackbacks

  1. Kommentar von mzeecedric:

    Gravatar von mzeecedric

    Sehr schön, vielen Dank für das Tutorial. Ist gebookmarkt und wird demnächst mal getestet!

  2. Kommentar von Agnes:

    Gravatar von Agnes

    Hallo Franziska, sehr schönes Script, aber bei mir hüpft die Slideshow so seltsam, das neue Bild lädt unter dem alten und wenn das alte verschwindet dann hüpft das neue nach oben. Oder war das so gewollt? Ich hab mal ein Screenshot gemacht wo das eine verschwindet und das neue kommt:
    img410.imageshack.us/img410/4839/zwischenablage017wq.jpg
    Das lustige ist, dass während ich den Comment hier tippe, springt das Formularfeld immer auf und ab! Ich habe Firefox (1.5) und reload hilft auch nicht.
    Grüße
    Agnes

  3. Kommentar von mzeecedric:

    Gravatar von mzeecedric

    @Agnes: bitte nicht so laut tippen, der monitor wackelt ja schon… ;-)

  4. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Agnes,
    hmm … das Problem hatte ich anfangs auch im IE.
    Dort lag es an der CSS-Datei, welche die neuen Bilder nicht mit der CSS-Eigenschaft display:none; geladen hatte.
    Hab das CSS nun aber eigentlich angepasst, so dass das Phänomen nicht mehr auftreten sollte …
    Ich habe Firefox 1.5.0.4 und in dem funzt es prima. Welche Firefox-Version hast Du genau?
    Versuch doch mal, den Cache zu leeren … vielleicht sieht Dein Browser ja noch die alte CSS-Datei??? Wenn nicht, dann meld Dich nochmal …
    Danke :)

  5. Kommentar von Franziska:

    Gravatar von Franziska

    @agnes: funzt denn das Original bei Dir? http://slayeroffice.com/code/imageCrossFade/xfade2.html

    @mzeecedric: :))

  6. Kommentar von designdragon:

    Gravatar von designdragon

    Schönes nützliches Script. Danke!

  7. Kommentar von Agnes:

    Gravatar von Agnes

    Tatsächlich, lag am Cache. Sorry für die Aufruhr.
    Grüße
    Agnes

  8. Kommentar von Viktor:

    Gravatar von Viktor

    Wirklich sehr schönes Script und vielen Dank für die “barrierefrei” Beschreibung wie man das Ganze sehr gut in die eigene Seite einbinden kann. :-)
    Solche Blogs sollte man öfters finden… Kompliment! :-)

    Viele Grüße
    Viktor

  9. Kommentar von Uli Fetz:

    Gravatar von Uli Fetz

    Schönes Script, gefällt mir sehr gut. Ich habe es nun mit 11 pics ausprobiert, aber bei mir wird partout das zweite Bild nicht angezeigt. Ich kann machen was ich will, keine Chance. Woran kann das liegen??

  10. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Uli,
    freut mich, dass Dir mein Script gefällt!
    Um Deine Frage zu beantworten, bräuchte ich ein wenig mehr Einblick in Dein Script, wie Du Deine Bilder benannt hast etc.
    Es ist schwer, da eine Ferndiagnose zu stellen …
    Viele Grüße
    Franziska

  11. Kommentar von Wolfgang:

    Gravatar von Wolfgang

    Hallo Franziska,
    ich hab diese Seite auf einem Mac angeschaut und da funktioniert das Script nicht. Der Browser war Safari mit aktiviertem Javascript. Das Original läuft allerdings einwandfrei. Woran könnte das liegen? Hast Du schon einen Test auf OS X/Safari gemacht? Ansonsten sehr schönes Script! Danke!

    Viele Grüsse
    Wolfgang

  12. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Wolfgang,
    danke für den Hinweis!
    leider hab ich keinen Mac zum testen zur Verfügung …
    So kann ich den Fehler schwer finden …
    Werde mich aber bei Gelegenheit mal damit beschäftigen.

    Grüße von
    Franziska

  13. Kommentar von Franz:

    Gravatar von Franz

    Bin auf der Suche nach einer Slideshow, die auch mit Firefox geht auf diese schöne Seite gestoßen. Ich wäre dankbar für einen Tipp, wie die Slideshow horizontal zentriert angezeigt werden kann.

    Danke
    Franz

  14. Kommentar von Franziska:

    Gravatar von Franziska

    Hmm …
    den Div-Container #slideshow, der alles beinhaltet, kann man genauso positionieren, wie alle anderen CSS-Elemente.
    Bei der Zentrierungsfrage hilft Dir sicher das hier weiter: http://www.thestyleworks.de/tut-art/centerblock.shtml

    Alles Gute!
    Franziska

  15. Kommentar von Norbert:

    Gravatar von Norbert

    ist wirklich alles sehr schön.
    Aber wie kann man die Diashow in einer Tabelle positionieren, dass diese immer am richtigen Platz erscheint? und nicht mit den CSS-Einstellungen, den dann sieht man bie jeder Bildschirmauflösiung das Bild irgenwo andres.

    Besten Dank

  16. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Norbert,
    die CSS-Angaben sind eigentlich nur für die Funktionalität der Bildergalerie wichtig.
    Du solltest das

    einfach in eine Tabelle packen oder es per CSS beliebig positionieren können.

    LG
    Franziska

  17. Kommentar von Olaf:

    Gravatar von Olaf

    Hallo Franziska,
    wirklich tolles script.
    Habe es gleich eingebaut und funktioniert super in Firefox2.0 und IE7.
    Info: Beim Bildwechsel sah man jedesmal den (Bild-)Hintergrund kurz durchscheinen. Habe dann als Lösung einfach hinter die slideshow einen (Farb-)Hintergrund gelegt.
    Ergebnis siehe bei http://www.okerfahrten.de .
    Grüße
    Olaf

  18. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Olaf,

    freut mich, dass Du Freude hast mit dem Script. Sieht auch super aus auf Deiner Seite!

    LG
    Franziska

  19. Kommentar von Benjamin:

    Gravatar von Benjamin

    Hallo! Nach langem Suchen, anscheinend auf ein super Script gestoßen. Ich möchte dieses einbinden und habe eine Frage: Kann ich anstatt die Bilder auf dem Server abzulegen auch einen HTML-Code hinterlegen, sodass das script externe Bilder lädt? Vielen Dank vorab!!!

  20. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Benjamin,
    wenn Du Dich ein bisschen mit coden auskennst, ist das sicher möglich. Es müssten einige Stellen im Script angepasst werden (Bild-URLs evtl. als Array verfügbar machen [nur so als Idee] … ).
    Allerdings sollte man eher keine externen Bilder in seine Webseite einbinden.

  21. Kommentar von Evelyn:

    Gravatar von Evelyn

    Tolles Script, bin gerade am Überlegen, wo ich es am Besten bei mir einbaue.

  22. Kommentar von oliver schnaus:

    Gravatar von oliver schnaus

    hallo!

    habe ursprünglich dieses script, das abhängig von der bildschirmauflösung ein bild generiert.
    ===================
    1024)

    {
    breite = 960;
    hoehe = 550;
    }

    else

    {
    breite = 488;
    hoehe = 300;
    }

    document.write(”);

    //–>

    ==================

    kann ich das mit der diashow kombinieren, damit auch hier die darstellung abhängig von der bildschirmauflösung erfolgt?

    vielen dank, gruß olli

  23. Kommentar von olli:

    Gravatar von olli

    und jetzt noch was: die neuen bilder, die vorgeladen werden, erscheinen immer unter dem aktuell dargestellten bild und rutschen dann nach oben.
    anfängerfehler???

    lg olli

  24. Kommentar von olli:

    Gravatar von olli

    mein frage von vorhin ist weg?!

    folgendes problem:

    ich habe bisher ein script, dass ein images abhängig von der bildschirmauflösung generiert:

    1024)

    {
    breite = 960;
    hoehe = 550;
    }

    else

    {
    breite = 488;
    hoehe = 300;
    }

    document.write(”);

    //–>

    kann man diese funktion in irgendeiner form in die diashow einbinden???

    danke, olli

  25. Kommentar von Marcel:

    Gravatar von Marcel

    Hallo.
    Erstmal dickes Lob von mir. Echt tolles Script.
    Wenn ich nun jedes einzelne Bild aus der Slideshow extern verlinken will, was muss ich da verändern? Jedes Bild einen anderen Link der sich in einem neuen Fenster öffnet.
    Dank schonmal…

  26. Kommentar von Fabian:

    Gravatar von Fabian

    Hallo Franziska

    Vielen Dank für dieses sehr gute Script. Ich muss jedoch leider auch bestätigen, dass das Script unter Safari nicht läuft. Mir fehlt leider die Zeit zur Fehlersuche und ein ausgewiesener Javascript-Profi bin ich auch nicht grade. Wenn Du Interesse hast, könnte ich dir jedoch insofern behilflich sein, dass du mir das jeweils geränderte Script zuschickst und ich teste, ob es unter Mac OS X bzw. Safari funktioniert. Nur so als Vorschlag … Gruss

  27. Kommentar von Sarah:

    Gravatar von Sarah

    Hallo zusammen,

    das Skript funktioniert super bei mir in Forefox und Opera, nur der IE streikt leider. Ich habe nichts verändert bis auf die Positionierung des div-Elements auf der Seite. Vom IE bekomme ich immer eine Meldung “Fehler auf der Seite, das Objekt unterstützt diese Eigeneschaft oder Methode nicht.” an einer Stelle an der nur Leerzeichen im Quellcode stehen. Gibt es jemanden mit dem gleichen Problem oder kann mir sagen woran es liegt?
    URL: http://taktischer-kleinbus.de/kleinbus/ocean/index.html

    Gruß

  28. Kommentar von Sarah:

    Gravatar von Sarah

    danke. hat sich schon erledigt.

  29. Kommentar von Michi:

    Gravatar von Michi

    hallo,
    hab das skript ausprobiert, aber leider wird immer nur das erste Bild angezeigt und die restlichen erscheinen nie.
    an was kann das liegen? habe es so eingebunden wie oben beschrieben.
    kann mir da jemand helfen?
    vielen dank
    michi

  30. Kommentar von Uta Gau:

    Gravatar von Uta Gau

    Hallo Michi, auch ich habe einige Zeit gebraucht – Fehler gemacht, irgendwas zuviel oder zuwenig getan, aber es funktioniert und sieht in der 16:9 Optik wirklich Klasse aus.
    Um Deinen Fehler zu finden, müsste man in das Innenleben Deiner Seite schauen, aus der Ferne geht das unmöglich.

    Uta

  31. Kommentar von Fabian:

    Gravatar von Fabian

    Okay, das Problem mit Safari scheint gelöst zu sein – dank der prompten Hilfe eines Mitglieds von xhtmlforum.de. Damit das Script auch unter Safari funktioniert, müssen folgende Änderungen im Code gemacht werden.
    ————————-
    Zeile 27:

    bilder[1] = new Image();

    ersetzen durch

    bilder[1] = document.createElement(“img”);
    ————————-
    Zeile 74:

    bilder[aktuell+2] = new Image();

    ersetzen durch

    bilder[aktuell+2] = document.createElement(“img”);
    ————————-

    Danach sollte die Slideshow auch unter Safari einwandfrei laufen.

  32. Kommentar von domag:

    Gravatar von domag

    Hallo,

    vielen Dank für dieses tolle Script. Es gibt leider nur ein Problem für mich.
    Evtl. Anfängerfehler…?
    Das funktioniert nur auf einer Seite. Ich möchte aber genau den gleichen 2-Bilder-Fade auf mehren Seiten einsetzten. Was könnte ich denn noch anderes machen als den Code von der funtioniernden Seite einfach zu kopieren. Ich verstehe das leider nicht. Kann mir jemand helfen?
    Gruß
    domag

  33. Kommentar von domag:

    Gravatar von domag

    Ich bin ein Depp! Mein Kommentar kann wieder gelöscht werden. Hatte einfach nur vergessen auch das Script mit in jede Seite einzubauen…:)

    Funtioniert jetzt alles mit IE und Firefox. Safari weiss ich nicht…

  34. Kommentar von Ben:

    Gravatar von Ben

    Super Script!!! Danke!! Hab ne Slideschogebastelt mit 82 bildern und es läuft top!!

    http://www.danilo-pockrandt.de

  35. Kommentar von Bäeribeeri:

    Gravatar von Bäeribeeri

    Nicht schlecht, das Skript! Ich habe unterhalb der Zeile 67 noch die Zeile:

    obj.style.KHTMLOpacity = obj.xOpacity;

    eingefügt. Nun läuft das Skript auch auf dem Konqueror und Safari

  36. Kommentar von Peter Reifegerste:

    Gravatar von Peter Reifegerste

    Hallo.
    Schönes Script, allerdings öffnet sich bei mir das 1. Bild nicht. Bitte schau doch mal nach. Es befindet sich alles im Ordner “slideshow”. Danke:

    http://www.mr-ibiza.de/slideshow/slideshow1.html

    Gruss Peter

  37. Kommentar von sascha:

    Gravatar von sascha

    hallo franziska,
    ist es eigentlich möglich dieses diashow öffters auf einer seite, mit 2 verschiedenen start u. folgebilder einzubinden?

    lg, sascha

  38. Kommentar von domag:

    Gravatar von domag

    Hallo, gibt es eine Möglichkeit die Bilder in zuflliger Reihenfolge anzeigen zu lassen? Random? Das fände ich noch sehr Abwechslungsreich, bzw. ein echtes Plus.
    Vielen Dank für eure Antwort.
    Gruß
    domag

  39. Kommentar von Ed:

    Gravatar von Ed

    Hallo Franziska,

    danke für das Script und die klasse Anleitung. Bin quasi Anfänger in HTML, CSS und JavaScript – aber ich hab’s geschafft: Die Slideshow läuft (übrigens mit den oben aufgeführten Anmerkungen auch in Safari).

    Jetzt freue ich auf mehr Scripte und Anwendungen von Dir…

    Liebe Grüße -
    Ed

  40. Kommentar von Patrick:

    Gravatar von Patrick

    Hi Franziska,
    erstmal kompliment für dein Script. Genau das habe ich lange gesucht und nun endlich gefunden.
    Ich weiß das du das Script auf freiwilliger Basis entwickelt hast und ich komme mir auch etwas unverschämt vor zu fragen aber ich mach es trotzdem mal:
    Würdest du eventuell noch eine Lösung parat stellen die die Bilder in zufälliger Reihenfolge abspielt?
    Das wäre dann für alle die was die Ihre Startseit etwas aufpeppen wollen so wie ich.
    Ich hab auch schon gesehen das zwei andere User danach gefragt haben und es wäre doch ein schönes Weihnachtsgeschenk oder ;-)

    Also ich hoffe du nimmst mir die Frage nicht übel.

    Gruß
    Patrick

  41. Kommentar von Carl Steiner:

    Gravatar von Carl Steiner

    Ich finde es ebenfalls ein 1A Script, vor allem weil Kommentare enthalten sind wodurch es möglich ist diesen auch zu verstehen und nicht nur unwissend einzubauen.!

    Unter http://www.alteradios.com/Tour/pics/world_tour/bike_at/bulgaria/7.htm
    könnt Ihr euch das ansehen, wie ich das Script abgeändert habe. Einfach auf “start slideshow” klicken und es geht los!

    Ich habe allerdings 2 div’s in Verwendung, weil ich nicht will das das Array Bilder[] ins unredliche ausufert. Daher ersetze ich das jeweilige Objekt um das zu verhindern. Ich habe noch nicht getestet ob es deshalb einen Überlauf geben könnte.

    Als nächster plane ich eine solche Slideshow mit einer Random Funktion, ich melde mich dann wieder hier :D.

    PS.: Tolle Infos auf der Seite weiter so!!!!

    Da Carl
    http://www.carl.at.nr

  42. Kommentar von Carl Steiner:

    Gravatar von Carl Steiner

    Der vorherige Eintrag kann gelöscht werden!

    Zumal das Array Bilder immer nur so groß wird wie Bilder im Verzeichnis vorhanden sind (bzw. was vorgegeben ist).

    MfG

    Da Carl

  43. Kommentar von Stephan:

    Gravatar von Stephan

    Hallo, super Script! Genial klein und effektiv.

    In der Hoffnung, dass Franziska oder ein sonstiges As nochmal auf diese Seite schaut, habe ich eine Frage. Ich würde das Script gern auf einer Seite mehrmals einstellen, aber leider verhalten sich beide Slideshows etwas ungewöhnlich; und unterschiedlich ungewöhnlich in IE und Firefox. Hat jemand einen Tip parat? Meine e-Mail Adresse lautet: stephandunkel@hotmail.com

  44. Kommentar von humedia:

    Gravatar von humedia

    Also bei mir funktioniert das Script nicht nach der anleitung, ich gehe zunächst einmal davon aus, dass der lade-aufruft des javascripts im header passiert , jedenfalls muss das bei mir soweit geklappt haben, ich bekomme folgende Fehlermeldung und bin mir ziemlich sicher, korrekte pfade (also wie beschrieben) eingefügt zu haben: Die Fehlermeldung erscheint in folgender Zeile:
    bild = d.getElementById(“slideshow”).getElementsByTagName(“img”);
    dabei hat d.getElementById(“slideshow”) has no properties.

  45. Kommentar von Franziska:

    Gravatar von Franziska

    Hast Du die Slideshow auch in einem div, das “slideshow” heißt?

  46. Kommentar von humedia:

    Gravatar von humedia

    hey, vielen dank für die schnelle Antwort anbei mal ne URL zum nachvollziehen ;-)

    http://huelskamp.de/swa/slidetest.htm

  47. Kommentar von Franziska:

    Gravatar von Franziska

    id=”slideshow”
    class=”start”

    Das istgleich muss nach ID und nach class stehen.

    Franziska

  48. Kommentar von humedia:

    Gravatar von humedia

    hey, ich hab schon den monitor umarmt, auch wenn der mich manchmal ganz schön blind macht ;-) die letzten zeilen bitte aus dem protokoll löschen ;-)

    super script, auch schön, im firebug zu bewundern, wie sich dynamisch die opacity werte ändern…

  49. Kommentar von Ralph Wörmke:

    Gravatar von Ralph Wörmke

    Hallo,

    erstmal herzlichen Dank für das Script.
    Ich habe es in meinem Testshop oberhalb des main_content laufen. Leider finde ich nicht heraus, wie ich die Anzeige zentrieren und wie ich wo einen Rahmen definieren kann.

    Ich würde die Slideshow gerne im top-logo-Bereich des Shops laufen lassen, aber so, das sie mittig angezeigt wird und zu beiden Seiten noch das top_logo zu sehen ist.

    Weis jemand wie ich hier vorgehen muß?

    Für Hilfe wäre ich sehr dankbar, da ich seit 2 Tagen alles mögliche versuche, ohne Erfolg.
    Ich muss nun also fragen.

    Den Shop findet man hier:
    http//www.morgengrün.de/teeshop. Ist noch eine Baustelle, deswegen die Verzeichnisangabe

    Gruß

    Ralph

  50. Kommentar von Franziska:

    Gravatar von Franziska

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

    Du musst das div “slideshow” horizontal mittig ausrichten. Siehe dazu meinen Beitrag http://die.netzspielwiese.de/blog/css/2006-03/inhalte-zentrieren-mit-css.

    Gruß Franziska

  51. Kommentar von Ralph:

    Gravatar von Ralph

    Hallo Franzika,

    ich nochmal.
    Die Slideshow hab ich jetzt dort zum Laufen gebracht, wo ich sie haben will.
    Das Problem ist nur, daß die Bilder beim 2-ten Durchgang nur noch fast transparent erscheinen.
    Welchen Fehler mache ich?

    Gruß

    Ralph

  52. Kommentar von Franziska:

    Gravatar von Franziska

    Ich kann Deinen Fehler nicht nachvollziehen. Bei mir läuft alles super.

    Franziska

  53. Kommentar von Fred:

    Gravatar von Fred

    Hallo Franziska!
    Tolles Script, sowas suche ich schon länger. Ich habe ein paar Tage jetzt rumprobiert und es auch zum Laufen bekommen mit unterschiedlichen Resultaten. Firefox und Opera kein Problem, IE7 je nach Betriebssystem unterschiedlich, Maxthon (IE7 Aufsatz) Probleme und ich weiss nicht mehr weiter.
    Die ersten zwei Bilder sind OK (11 gesamt), dann werden die dazwischen kleiner in der Höhe angezeigt, das letzte ist wieder OK. CSS Bildhöhe auch geändert, Cache der Browser gelöscht usw. IE7 auf Vista löppt, XP leider mit den beschriebenen Problemen bei mir auf zwei Rechnern. Hast du da eventuell eine Idee wo ich was falsch gemacht haben könnte?

  54. Kommentar von Martin Rieger:

    Gravatar von Martin Rieger

    Hallo Franziska,

    nach langer Zeit habe ich endlich mal ein Script gefunden, welches ausgezeichnet in allen Browsern funktioniert. Bisher habe ich so einen Effekt in Flash gemacht, da ein bisher verwendetes Script nur bedingt einsetzbar war. Herzlichen Dank. Damit geht das viel einfacher und schneller.
    Die Probleme wie Fred sie schildert, kann ich nicht bestätigen.
    Ich habe das Script bei nahezu allen Variationen getestet.

  55. Kommentar von johannes:

    Gravatar von johannes

    Hallo und vielen Dank für das Script!

    Bin Anfänger und suche schon lange nach einem möglichst einfachen Weg eine Slideshow für ein Grafikprojekt in meine zukünftige Site einzubinden (ohne Flash-plug-ins)

    Nur leider will das bei mir nicht so recht laufen, trotz genauer Befolgung der Beschreibung, bin ziemlich ratlos.
    Startimage wird korrekt angezeigt, aber eben nicht mehr.
    Habe Pfade und Syntax zigmal überprüft, alles so wie es oben beschrieben ist.
    Habe ich irgendwas Grundlegendes übersehen?Entschuldige mich schon mal im voraus weil eben erst mein erstes Projekt?

    aber trotzdem danke !

  56. Kommentar von Gordon:

    Gravatar von Gordon

    Hallo Franziska!

    Finde das Script auch super und habe gleich mal versucht es zu übernehmen. Leider habe ich aber das gleiche Problem wie es hier schon mal leicht besprochen wurde. Die Bilder Springen übereinander. Habe mich voll und ganz an deine Anweisungen gehalten. http://die.netzspielwiese.de/blog/wp-content/plugins/wp-lightboxJS/lightbox.css.php

    Mein Ziel war es diese Slideshow ganz im Hintergrund laufen zu lassen. Kannst du mir vielleicht helfen?

    Herzliche Grüße aus Berlin

    Gordon

  57. Kommentar von guitarrero:

    Gravatar von guitarrero

    hi franziska.
    danke für dein script. es hat uns eine schöne it stunde bereitet.
    mfg Martin

  58. Kommentar von Johannes:

    Gravatar von Johannes

    Hi,
    superschönes Script. Genau das, was ich gesucht habe.
    Eine Frage hätte ich allerdings. Kann man die Zeit des Überblendeffekts irgendwo einstellen? Kann zu wenig coden, als ich dass ich sehen würde, wo das gehen könnte.
    Möchte gerne, dass der Bildwechsel etwas länger dauert.
    Vielen Dank.

  59. Kommentar von Lukas:

    Gravatar von Lukas

    also wenn ich das skript einbine, funktioniert zwar alles super, allerding s schaffe ich es nicht, dass die slideshow rechts ist und links von ihr ein text steht, der sie umschliesst, also:

    bla bla bla |——————–|
    bla bla bla |–slideshow–|
    bla bla bla |__________|
    bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla

    Habe alles gemacht, wie du gesagt hast, nur in der CSS oben noch in ‘#slideshow’ eingefügt:
    position: right;
    float:right;

    und den absolute-teil aus ‘#slideshow img’ entfernt

    Was mache ich falsch? da geht es zwar grundsätzlich, aber beim Laden des nächsten Bildes springts kurz nach unten und dann wirds erst wieder weiter oben richtig angezeigt….

  60. Kommentar von Werner:

    Gravatar von Werner

    Hallo Franziska

    Script läuft super :-)

    Nur wie bringe ich es dazu, dass es die Show nur einmal durchläuft. lso nach letzten Bild stoppt?

    Ganz liebe Grüße

    Werner

  61. Kommentar von Liane Strauch:

    Gravatar von Liane Strauch

    Hallo Franziska

    Das Script hat mir sehr geholfen und es funktioniert auch gut. Nur ein Problem habe ich: Das erste Bild wird nicht angezeigt, dann das zweite bis zum 4. und das erste wieder nicht, d.h. eine Sequenz bleibt immer ohne Bild, bis es wieder bei 2 anfängt. Woran kann das liegen?

    Ganz liebe Grüße
    Liane

  62. Kommentar von Heiner:

    Gravatar von Heiner

    Hallo Franziska,

    das ist wirklich klasse: Seit vier Tagen habe ich mindestens fünf verschiedene Vorlagen ausprobiert und war kurz vor der Verzweiflung: Danke, dass Dein script so toll und auf Anhieb (!) funktioniert. Es läuft bei mir unter WordPress 2.8.2. Zu bewundern ist, dass Dein script schon seit 3 Jahren – also praktisch seit “Generationen” – tadellos funktioniert. Meine Bewunderung.

    Gruß Heiner

  63. Kommentar von Herbert Beckers:

    Gravatar von Herbert Beckers

    Hallo Franziska, “eigentlich” funktioniert Dein Script wunderbar bei mir auf allen installierten browsern. Nur hier und da höre ich von Besuchern, dass dieses Element beim scrollen der Seite fest positioniert bleibt und daher der vorhandene Text hinter dem Bildübergangs-Element gescrollt wird und dann nicht mehr sichtbar ist.

    Hast Du eine Idee? z.B. z-index oder so?

  64. Kommentar von Christian Walgenbach:

    Gravatar von Christian Walgenbach

    Hallo Franiska, super Script. Obwohl ich die Bildanzahl auf 15 gestellt habe. Zeigt er nur 3 Bilder an.

    Hier die URL: http://www.sattler-weber.com/images/slideshow.html
    Hast du eine Idee ?

  65. Kommentar von Mike:

    Gravatar von Mike

    Hallo,

    dieses Skript scheint echt super zu sein. Ich bin kompletter Neuling auf dem Gebiet HTML, aber das Handling mit diesem Skript habe sogar ich verstanden. Klasse. Wie schwer wäre es denn jetzt noch, das Skript so zu aktualisieren, dass man mit einem Click auf ein Bild, das gerade in der Slideshow zu sehen ist, auf eine Webseite weiterverlinkt wird?

    Schöne Grüße

  66. Kommentar von Frank:

    Gravatar von Frank

    Hallo, ich verwende dieses Script ebenfalls und wollet an dieser Stelle sagen das alles super funktioniert. Nun würde ich gerne in einer nebenstehenden kleinen Tabelle die folgenden Bilder in einer laufenden Galerie anzeigen. Gibt es dazu auch eine Anleitung?
    Funktionieren soll es zum Schluss in etwa so http://www.ajaxschmiede.de/demos/slideshow/

    LG

  67. Kommentar von Engelbert:

    Gravatar von Engelbert

    Guten Morgen!

    Eine Frage, die hier noch nicht gestellt wurde: muss man überhaupt die Anzahl der Bilder eingeben? Bzw. was passiert, wenn man zuviel oder zu wenig angibt?

  68. Kommentar von Uwe:

    Gravatar von Uwe

    Hallo,
    ich bei ein totaler Neuling in html, js etc. und ich muss sagen: Das Script funktioniert super – vielen Dank dafür!
    Eine Frage habe ich aber dennoch: Wie ließe sich wohl die Geschwindigkeit der Fades steuern?
    Danke vorab für die Antwort!
    Viele Grüße … Uwe

  69. Kommentar von Uwe:

    Gravatar von Uwe

    Hallo, nochmal ich …
    Noch eine weitere Frage: Bei jedem neuen Aufruf der Seite erzeuge ich per php eine Zufallszahl zwischen 1 und der Gesamtzahl der Bilder, die ich an Javascript übergebe (var = zufallszahl). Mit dieser Bildnummer soll die Slideshow dann beginnen und aufsteigend “abgearbeitet” werden (… und bei Bild 001.jpg natürlich als Schleife weiterlaufen). Hättest du dafür eine Idee?
    Nochmal Danke vorab für die Antwort!

    Gruß… Uwe

  70. Kommentar von Calypso:

    Gravatar von Calypso

    hy.

    dein script ist echt ganz ganz große klasse. super einfach einzubinden und leicht zu verstehen.

    ich bin jetzt auf der suche nach einer slideshow in der art, aber mit dem zusätzlichen feature, dass wenn man auf eines der bilder klickt, dass dann eine lightbox aufgeht in der das bild dargestellt wird.

    hat jemand eine ahnung wo ich sowas finden könnte? leider sind meine javascript-kenntnisse zu schwach als dass ich mir selbst sowas dazu scripten könnte :(

    bin für hilfe sehr dankbar!

    liebe grüße
    calypso

  71. Kommentar von Elke Schmidt:

    Gravatar von Elke Schmidt

    Hallo Franziska,

    danke für dieses schöne Script.
    Was muß ich tun, damit das letzte Bild stehenbleibt,
    ohne das ich dieses 50x kopieren muss?

    Viele Grüße Elke

  72. Pingback: » Slideshow in Website einbinden - Schwieloweb Blog:

    Gravatar von » Slideshow in Website einbinden – Schwieloweb Blog

    [...] Eine sehr gute Anleitung zum Einbinden einer Slideshow in eine Webseite ist auf Netzspielwiese zu finden. Der Artikel ist sehr gut und verständlich geschrieben. Man kann eine beliebige Anzahl an Bildern einfügen. Das vorhandene Javascript muss nur minimal angepasst werden. http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-scripting-slideshow [...]

  73. Kommentar von isapi:

    Gravatar von isapi

    ein super Script, vielen Dank!
    genial erklärt und auch deppen wie mich machbar ;-)

    jetzt würde ich nur gerne die bilder zufällig also als random anzeigen lassen – geht das? wenn ja wie?
    vielen dank und gruß elvisa

  74. Kommentar von isapi:

    Gravatar von isapi

    also nochmal ohne tippfehler ;-)
    ein tolles script! vielen Dank.

    wie kann man die Bilder zufällig also als random erscheinen lassen?
    wäre dankbar für einen Tipp..
    vielen Dank und Gruß Isapi

  75. Pingback: » Slideshow in Webseite einbindenSchwieloweb:

    Gravatar von » Slideshow in Webseite einbindenSchwieloweb

    [...] beliebige Anzahl an Bildern einfügen. Das vorhandene Javascript muss nur minimal angepasst werden. http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-scripting-slideshow Comment [...]

  76. Kommentar von Tom:

    Gravatar von Tom

    Hallo!
    Wie binde ich die CSS Stylesheet Datei in meine Webseite ein??

    Danke jetzt schon für eine schnelle Hilfe!!
    Nutze den Magix Web Designer 6.

    Tom

  77. Pingback: » Slideshow in Webseite einbinden - Ralf Homey:

    Gravatar von » Slideshow in Webseite einbinden – Ralf Homey

    [...] http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-scripting-slideshow   [...]

  78. Kommentar von Jörg:

    Gravatar von Jörg

    Hallo,
    tolles script.
    Vielen Dank dafür.
    Nur noch eine kleine Frage.
    Bei den Demo Bildern hier auf der Seite habt ihr so einen schönen Rahmen in grau um die Bilder gesetzt.
    Wenn ich aber dei Bilder einzeln anzeige ist dieser nicht zusehen.
    Ist das auch ein Script?

    Viele Grüße
    Jörg

  79. Kommentar von Hartmut:

    Gravatar von Hartmut

    hallo,
    hab das skript ausprobiert, aber leider wird immer nur das erste Bild angezeigt und die restlichen erscheinen nie.
    an was kann das liegen? habe es so eingebunden wie oben beschrieben.
    kann mir da jemand helfen?
    vielen dank

  80. Kommentar von Franziska:

    Gravatar von Franziska

    @Jörg: das ist mit CSS gemacht, also zum Beispiel so:

    img
    {
    padding: 10 px;
    border: 3 px solid #ccc;
    }

    @Hartmut: Da kann irgendwas nicht stimmen. Hast Du vielleich JavaScript deaktiviert? Dann wird nur das erste Bild angezeigt.
    Ansonsten Deinen Quellcode mal hier reinkopieren!

    Liebe Grüße
    Franziska

  81. Kommentar von sandra:

    Gravatar von sandra

    hallo franziska

    erstmal vielen dank. das war eine schöne geste, so qualifiziert und verständlich deine scripte einzustellen – DANKE!

    ich hab aber dasselbe problem, wie schon mal weiter oben gefragt, aber keine lösung hier eingetragen wurde?

    bild 1 und 2 läuft (von insg. 16) und dann sieht man nix, bis bild 16 wieder erscheint, darauf folgt 1,2 und dann nix fortlaufend.
    auf mac os X, safari und FF und explorer – alle dasselbe

    hast du das schonmal kommentiert?
    ich find nix.

    danke für deine mühe
    lg
    sandra

  82. Kommentar von sandra:

    Gravatar von sandra

    ich nochmal
    alle bilder benannt image-001.jpg fortlaufend
    deine musterseite läuft bei mir

  83. Kommentar von sandra:

    Gravatar von sandra

    kommentar von fabian

    Zeile 27:

    bilder[1] = new Image();

    ersetzen durch

    bilder[1] = document.createElement(”img”);

    das kann nicht sein, denn da ist ein syntaxfehler drin, sagt mein dokument …

  84. Kommentar von sandra:

    Gravatar von sandra

    juchuuu gefunden den fehler

    die endung jpg muss immer klein sein nich JPG !
    jet goats
    ab in die heia

  85. Kommentar von Carel:

    Gravatar von Carel

    Hi Franziska,

    prima Anleitung! dank dir habe ich viel an Zeit gespart.

    Trotzdem habe ich das Problem wie viele andere, dass die nächsten Slideshow-Bilder unter dem aktuellen erzeugt und dann zurecht nach oben geschoben wird.

    Ich habe alles probiert (cache leeren und und und) aber das Problem besteht immer noch.

    Firefox Version: 13.0.1
    IE 8

    Kannst du mir bitte sagen, was ich falsch mache?

    1000 Dank!

  86. Kommentar von Anna:

    Gravatar von Anna

    Hallo Franziska,

    ich habe eine Frage zur Slideshow, die hier schoneinmal gestellt, aber leider nicht beantwortet worden ist:

    Ist es möglich die Slideshow nach einmaligem Ablauf der Bilder anzuhalten?
    Was müsste ich dazu in der Javascript Datei ändern?

    Vielen, vielen Dank!

  87. Kommentar von Franziska:

    Gravatar von Franziska

    @carel: das passiert nur, wenn CSS deaktiviert ist oder noch nicht aktiviert wurde.
    Die Slideshow funktioniert nur auf einer Seite mit CSS-Layout.

    @anna: Tut mir leid, ich habe da keine Zeit dafür. Das musst Du schon selbst rausfinden.

    Franziska

  88. Kommentar von Tabitha:

    Gravatar von Tabitha

    Hallo,
    Vielen Dank für die tolle Anleitung. Ich hab das Ganze erst einmal in meine “Versuchs-HP” eingebunden mit Adobe Dreamweaver, und da hats super funktioniert. Danach wollte ich die gleiche Slideshow in meine richtige HP einbinden, und da funktionierts einfach nicht richtig. Die Ordner mit den Bildern sind alle am richtigen Ort etc., ich hab alles wie oben (mehrfach) gemacht, doch es zeigt mir immer nur das erste Bild an. Danach verblasst es zwar, doch anstatt dem zweiten Bild erscheint ein kleines Fragezeichen in einem blauen Kasten. Irgendwie findets die folgenden Bilder nicht, obwohl die im gleichen Ordner sind. Im js-File hab ichs meiner Meinung nach auch richtig verbunden, habs x Mal mit der funktionierenden Version verglichen und finde keine Unterschiede…

    Kann mir jemand helfen? Ich bin am verzweifeln :(

  89. Kommentar von Abdul:

    Gravatar von Abdul

    sehr Gut vielen Dank

  90. Kommentar von Gregor:

    Gravatar von Gregor

    Hallo Franziska,

    ich würde gerne diese Funktion wie hier bereits angefragt auch bei mir einbauen.
    Gibt es da eine Möglichkeit? Ich habe schon ein paar Sachen ausprobiert bin aber bis jetzt immer gescheitert.

    “hallo franziska,
    ist es eigentlich möglich dieses diashow öffters auf einer seite, mit 2 verschiedenen start u. folgebilder einzubinden?

    lg, sascha

    18. Oktober 2007 um 08:42 “

  91. Kommentar von FranziskaM:

    Gravatar von FranziskaM

    Ich denke, dass es nicht möglich ist, dieselbe Slideshow ohne Abänderung 2 oder mehrmals auf derselben Seite einzubinden.
    Ich hab es aber noch nicht probiert.

    LG
    Franziska

  92. Kommentar von Gregor:

    Gravatar von Gregor

    Ich bin jetzt so vorgegangen das ich eine links.js und eine rechts.js habe beide binde ich über den header ein. leider wird nur die erstgenante .js auf der Seite berücksichtigt.

    hast du eine idee wie man es auf die schnelle lösen könnte?

    lg
    gregor

Kommentar schreiben

* Pflichtfelder