Blog, HTML / CSS, JavaScript / DHTML

jQuery simple FadeSlideShow – Content / Image Slider einbauen und verwenden

WordPress Entwickler und Webdesigner

Der eine oder andere mag sich vielleicht noch daran erinnern, dass ich vor einigen Monaten eine JavaScript SlideShow auf jQuery Basis programmiert habe. Genau diese SlideShow ist mittlerweile ausgewachsen und hat eine eigene Webseite bekommen, auf der ihr euch auch einmal die Demo ansehen könnt.

Ich möchte die Gelegenheit nutzen und euch die SlideShow mit allen Funktionen noch einmal vorführen. Da ich das Script unter GNU GPL und MIT Lizenz veröffentlicht habe, kann sich jeder Interessierte das Script ganz einfach an die eigenen Bedürfnisse anpassen.

Abgesehen von den Lizenzrechtlichen Freiheiten bietet das Script ein hohes Maß an Anpassungsfähigkeit und Individualisierungsmöglichkeiten mittels der Optionen und CSS.

Anzeige:




Wie wird die SlideShow eingebunden?

Der Einbau ist relativ einfach und kann sehr individuell gehalten werden, denn es besteht nicht die Notwendigkeit bestimmte Tags zu verwenden, sondern nur eine bestimmte Struktur einzuhalten.

In dem Beispiel steht das * für ein beliebiges HTML-Element:

<* id="slideshow">
    <*>Subelement</*>     
    <*>Subelement</*>  
</*>

Um das ganze ein bisschen zu verdeutlichen, sind hier ein paar Beispiel-Strukturen mit verschiedenen Tags:

Einzelbilder in einem Div-Container

<div id="slideshow">
    <img src="images/4.jpg" width="640" height="480" border="0" alt="" /> <!-- Dieses Bild wird in der SlideShow als letztes angezeigt -->
    <img src="images/3.jpg" width="640" height="480" border="0" alt="" />
    <img src="images/2.jpg" width="640" height="480" border="0" alt="" />
    <img src="images/1.jpg" width="640" height="480" border="0" alt="" /> <!-- Dieses Bild wird in der SlideShow als erstes angezeigt -->
</div>

Bilder in Liste (ul)

<ul id="slideshow">
    <li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- Dieses Bild wird in der SlideShow als letztes angezeigt -->
    <li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- Dieses Bild wird in der SlideShow als erstes angezeigt -->
</ul>

Bilder in Container (div)

<div id="slideshow">
    <div><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></div> <!-- Dieses Bild wird in der SlideShow als letztes angezeigt -->
    <div><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></div>
    <div><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></div>
    <div><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></div> <!-- Dieses Bild wird in der SlideShow als erstes angezeigt -->
</div>

Einbinden der JavaScript Funktionen

Da das simple FadeSlideShow Plugin auf jQuery basiert ist natürlich eine der Vorraussetzungen, dass die jQuery auch eingebunden ist. Danach dann die entsprechende JavaScript Datei des Plugins.

<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/fadeSlideShow.js"></script>
</head>

Wenn diese beiden JavaScript Dateien eingebunden sind, muss nur noch die Funktion gestartet werden:

jQuery(document).ready(function(){ // Dom Ready Funktion von jQuery
    jQuery('#slideshow').fadeSlideShow(); // Start der simple FadeSlideShow
});

Mit diesem Code wird die SlideShow mit dem Element ID „#slideshow“ gestartet.

Anpassen des Scriptes mittels Optionen

Die simple FadeSlideShow bietet verschiedene Optionen um sie an die Bedürfnisse des Verwenders anzupassen. Folgende Optionen können eingestellt werden (bei den aktuellen Werten handelt es sich um die Standardwerte):

width: 640, // Weite der SlideShow
height: 480, // Höhe der Slideshow
speed: 'slow', // Animationsgeschwindigkeit
interval: 3000, // Zeit zwischen Bildwechsel 1000 = 1 Sekunde
PlayPauseElement: 'fssPlayPause', // ID für Play / Pause Element
PlayText: 'Play', // Play Text
PauseText: 'Pause', // Pause Text
NextElement: 'fssNext', // ID für den weiter Button
NextElementText: 'Next >', // Text für den weiter Button
PrevElement: 'fssPrev', // ID für den zurück Button
PrevElementText: '< Prev', // Text für den zurück Button
ListElement: 'fssList', // ID für die Bilder-Liste
ListLi: 'fssLi', // Klasse für LI-Elemente in der Bilder-Liste
ListLiActive: 'fssActive', // Klasse für aktives Element in der Bilder-Liste
addListToId: false, // Bilder-Liste in ein HTML Element mit der ID ... einfügen
allowKeyboardCtrl: true, // Keyboardsteuerung erlauben
autoplay: true // Autoplay an

Wichtig: Die Elemente PlayPauseElement, NextElement, PrevElement und ListElement werden automatisch von der SlideShow generiert, wenn ihr diese Elemente selber anlegen wollt, dann setzt den Wert in den Optionen auf false.

Wie werden die Optionen geändert

Die Standard-Optinen können ganz einfach im Funktionsaufruf der simple FadeSlideShow geändert werden.

Hier ein Beispiel um die Weite und Höhe zu ändern:

jQuery(document).ready(function(){
    jQuery('#slideshow').fadeSlideShow({
        width: 800,
        height: 600
    });
});

SlideShow mit CSS stylen

Falls nicht in den Optionen geändert, sind dies die Standard-CSS Selektoren für die Elemente der SlideShow.

#fssPrev // ID vom Zurück Button
#fssNext // ID vom Weiter Button
#fssPlayPause // ID vom Play / Pause Element
#fssList // ID der Steuerungs-Liste
.fssLi(X) // Klasse der LI Elemente innerhalb der #fssList - x ist eine fortlaufende Nummer
.fssActive // Klasse für das aktive Element innerhalb der #fssList

Ich wünsche euch viel Spaß mit der SlideShow und hoffe, dass ihr soweit alles verstanden habt.

Die offizielle Webseite der SlideShow findet ihr hier: www.simplefadeslideshow.com

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

116 Antworten zu “jQuery simple FadeSlideShow – Content / Image Slider einbauen und verwenden”

  1. Für einen Anfänger ist das leider überhauptnicht nachvollziehbar. Wie binde ich den JQuery und die java-Scripte in meine Website ein?
    Du hast dazu geschrieben, dass es Vorraussetzung für dein Plugin sind.

    Aber gehen wir doch mal davon aus, dass diese Seite bei google ziemlich weit oben geranked ist. Dann macht es doch durchaus Sinn hier kurz zu erklären, wie und wo man die ganzen Scripte einbindet.

    So erklärst du nur die zweite Hälfte der Geschichte. Die erste Hälfte würde ich aber auch gern erfahren!

    Lieben Gruß,
    ein Google-Referer

  2. Pascal, ja es hat geklappt.
    Ich Depp hätte ja gleich mal in die index.html reinschauen können, die du in das Plugin gelegt hast.

    Das Plugin entspricht absolut meinen Anforderungen. Ich bin begeistert!

    Danke!

  3. Hey, ich habe ein kleines Problem. Ich würde die unteren Buttons 1-4 gerne auf 4 Bilder legen die ich in einzelnen DIVS liegen habe. Wie kann ich jedem Bild der Liste quasi einem Button zuordnen? ;P mfg

    • Ja, dann müsstest du allerdings die SlideShow umprogrammieren oder du ersetzt den innerHTML mit JavaScript, dass geht mit der jQuery Funktion html(‚bla bla‘) ganz einfach.

  4. hallo,
    sehr schön…ja
    aber wie kann ich zwei oder mehr slideshows auf einer Seite einbinden???
    Wäre dir dankbar für eine Nachricht.

    lieber grüße
    peter bold

  5. hallo
    auch ich danke für Dein tutwerk.
    aber auch ich hab da eine frage , nämlich :

    Wie wir wissen man kann JS-skripte entweder direkt im html einbinden oder auslagern und die dateien mit *.js als erweiterung bennenen.
    Wäre also möglich die beiden jquery.js und fadeSlideShow.js einfach in das body einzubinden eben als script tag ?? möchte vermeiden daß die skripte von fremden seiten geladen werden

    ciao
    Ravelution

    • Das könntest du zwar machen, es bietet sich bei den großen Scripten aber nicht wirklich an! Du musst die Scripte doch auch nicht von einem anderen Server laden, du speicherst die *.js Dateien auf deinem Webserver und bindest sie auch von dort ein.

    • Danke für prompte antwort:

      Leider ist es beim so manchen Anbietern nicht mal das erlaubt , es ist einfach verboten Scripte von woanders nachzuladen ( glaube es mindestens immer noch , obwohl Real bin mir da nicht so sicher ) .
      Es wird vielleicht einfacher wenn ich Euch gleich verrate um wem es geht,nämlich EBAY.
      Da ist es grundsätzlich nachladen von skripten verboten , nicht jedoch wenn es direkt im ebay-html-body implementiert wird.
      Was meint Ihr würde sowas funktionieren ?

      danke im vorraus

      ravelution

  6. Hello,

    very nice plug, well documented.

    Just one question : I would like to reduce the speed: ’slow‘ is still too fast for me.

    May I use another value for speed ?

    Thanks,

    Wonderfoule

    • Yes, you can use: 1000 for a second or 2000 for two seconds – generell: You can use the standard jQuery animation speed attributes also „slow“ and „fast“ or miliseconds (1000 = 1 second)

  7. Hi,
    also ich finde die Slideshow sehr interessant.
    Ist es denn möglich auch andere Inhalts-Formate zu unterstützen, wie z.B. kleine Flashvideos/Animationen?

    Viele Grüße

  8. Hi Pascal
    super slideshow. Bin dran diese in meine Website einzubauen. Funktioniert es auch mit unterschiedlich grossen Bilder in einer Slideshow, ohne diese immer auf die eingegebene width/height der Slideshow Optionen zu verziehen?
    Danke und viele Grüsse
    manu

    • Hast Du mir eventuell einen Tip was ich einstellen muss? Wenn ich alle Bilder als IMG in einem DIV „slideshow“ einbinde, verzieht es mir die Bilder immer auf die Grösse, die in den Slideshow Einstellungen eingegeben ist. Wenn ich die Bilder als Liste (li) einbinde, mit ul und in einem DIV, dann zeigt es mir die Bilder zwar in der jeweils korrekten Grösse, aber die Bilder sind übereinander (also man sieht bei kleineren Bilder die grösseren Bilder im Hintergrund)…
      Irgendwie hab ich nicht raus, was ich ändern muss, dass dies nicht mehr passiert.
      Vielen Dank.

  9. Hallo Pascal,
    dein Script ist echt klasse.
    Bin dabei es auf einer Seite einbauen. Allerdings habe ich ein Problem mit dem IE.
    Ich habe DIVs mit Hintergrundbildern angelegt, die sich abwechseln. Innerhalb dieser DIVs habe ich ein weiteres DIV, das eine kurzen Text enthält, sozusagen als Overlay.
    Leider faden die inneren DIVs beim IE nicht mit aus, sondern bleiben stehen und verschwinden erst auf einen Schlag wenn das neue DIV vollständig eingeblendet ist.
    Hast du mir einen Tip, wie ich die inneren DIVs zum fade-out bewegen kann, bzw. was ich falsch mache?
    In allen anderen Browsern läuft es perfekt.
    Vielen Dank im Voraus!
    Chris

    • Wow, schon mal Danke für die schnelle Antwort!
      Ich hab es im IE 8 getestet. Da läuft es nicht rund.
      Eben hab ich es noch im IE 9 ausprobiert, da funktioniert es wieder reibungslos.
      Das Leben könnte so schön sein ohne Internet Explorer 😉

  10. Tolles Skript… genau was ich gesucht habe. Nur eine Frage:

    Die Höhe des Sliders scheint fix zu sein. Gibt es eine Möglichkeit die Höhe dynamisch zu gestalten? Die Höhe des Sliders soll bei mir von der Höhe des Inhaltes abhängig sein. Ist das möglich?

    Viele Grüße

    • Danke für die rasche Antwort. Ein neues Problem trat dann jedoch auf. Die nachfolgenden DIVs richteten sich an der höchsten Höhe aus, waren also bei einem verkleinern zu weit unten. Ich habe das jetzt einmal via Javascript/Jquery gelöst:

      imageheight = $(„.class_vom_bild“).outerHeight(); // Höhe des Bildes
      $(„#slideshow“).css(„height“, imageheight); // Anpassung der Slideshow

      Funktioniert ganz gut.

      Viele Grüße
      Tobi

    • Hallo Tobi,
      habe gerade das gleiche Problem wie du und komme nicht drauf wo genau ich

      imageheight = $(“.class_vom_bild”).outerHeight();
      $(“#slideshow”).css(“height”, imageheight);

      einfügen soll? in der jquery.js datei? wo dort?
      wenn ich es hinten anhänge funktioniert gar nichts mehr …

      Danke und Gruß, Fabian

  11. Eine kurze Frage noch. Wenn man vom letzten Bild zurück aufs erste faded, oder ein Bild überspringt, erkennt man beim faden ganz leicht die übersprungenen Bilder. Ist nichts dramatisches, ist mir jedoch aufgefallen. Gibt es eine Möglichkeit, die jeweilig nicht betroffenen Bilder zu verstecken und erst sichtbar zu machen, wenn sie ‚dran‘ sind?

    Viele Grüße
    Tobi

  12. Hallo Pascal

    Super Plug-In, herzlichen Dank!

    Grundsätzlich funktioniert die „Slideshow“ für meine Zwecke beinahe perfekt.

    Mein Problem ist folgendes.

    Ich verwende die „Slideshow“ per „ul/li“ für den Wechsel von Hintergrundbilder, sowohl der Wechsel wie auch das „Faden“ werden beispielsweise in „Google Chrome“ oder „Opera“ wunderschön umgesetzt. In „Firefox“, „Safari“, und „IE-9“ wird jedoch nach dem ersten Durchlauf der Bilderserie, das erste Bild im unteren Drittel des Screens wie ausgeblendet und es entsteht für kurze Zeit ein hässlicher Balken. Es betrifft immer nur das Bild, welches als erstes deklariert wurde. Hast du mir eventuell einen Tipp, wie ich diesen Makel beheben kann?

    Vielen Dank im Voraus
    Greetings, Trisha

  13. Hi Pascal.

    Kurze Frage: Slideshow läuft perfekt, gibt es allerdings irgendeine Möglichkeit, auch mit Transparent (PNG) zu arbeiten? Leider wird ja nur das erste Bild komplett ausgeblendet, die andern Bilder liegen sichtbar dahinter. (Zur Not muss ich eben JPGs draus machen, aber vielleicht weisst du ja Rat)

    Grüße
    Tobi

  14. Hallo Pascal,
    tolle Slideshow.
    Eine Frage hätte ich allerdings:
    Kann man die Steuerungsliste auch über die Slideshow legen?
    Ich bekomme den fssList-Layer einfach nicht über die slideshow.

    Vielen Dank und beste Grüße aus München.

    • Hi Michael,
      danke für das Lob. Du kannst die Liste z.B. mit absoluter Positionierung nach oben bewegen oder in dem du der Liste einen extra Container anlegst die Möglichkeit besteht auch.

  15. Hi Pascal,

    ich hatte schon lange vor deine Slideshow mal auszuprobieren. Jetzt hats endlich geklappt. Läuft super! 1A. Vielen herzlichen Dank dafür! Das war genau das was ich gerade brauchte um schnell zu einer übersichtlichen, nicht überladenen Lösung zu kommen.

    🙂

  16. Hallo Pascal,

    vielen Dank für das schöne Script und die Dokumentation. Habe ein wenig damit gespielt und alles gefällt mir wunderbar.

    Einziger Wehrmutstropfen aus meiner Sicht, zumindest wenn man eine grössere Anzahl Bilder anbieten möchte:

    Es werden immer alle Bilder erst geladen, bzw. müssen geladen werden, bis die Seite fertig ist. Das heißt, wenn ich z.B. eine 30 Bilder-Slideshow anbiete, aber jemand nach 5 oder 10 Bildern die Seite wechselt, wurden 20-25 Bilder umsonst geladen. Das mag bei schnellen Internetanbindungen ja ega sein, aber bei langsameren Anbindungen, die es ja leider öfter gibt als man vielleicht denken mag, ist das ziemlich quälend.

    Also bei einigen Bildern (5-10) ist das sicher zu vernachlässigen, aber je grösser eine Diaschau ist desto mehr gewinnt das an Relevanz.

    Ich habe für meine Seite mal vor etlicher Zeit die „Mutter der Slideshows“ (Lightbox v2) angepasst, daher vermute ich, das das schon ein erheblicher zusätzlicher Aufwand wäre wenn immer nur die benachbarten Bilder (falls nicht schon geschehen) vorgeladen werden. Aber lohnenswert wäre es sicher, denn der Bildwechsel ist wirklich schön smooth.

    Weiterhin viele kreative Einfälle und Spaß bei der Arbeit,
    Horst

  17. Hallo Pascal,
    auch ich bin ganz glücklich, dass ich deine Seite gefunden habe.
    Danke schön!

    … ein paar kleine Fragen habe ich als „Anfänger“ aber auch noch:

    1. meine ganze Seite ist zentriert, sowohl vertikal als auch horizontal. Ich habe unterschielich große bilder in der slide show.

    Ich hatte das Problem, dass weniger breite Bilder nicht zentriert angezeigt werden sondern am linken Rand der slideshow landen, das habe ich nach einigen Versuchen mit dem Zusatz „text-align:center“ in der css-datei lösen können:

    #slideshowWrapper{position:relative;width:800px;margin:auto;text-align:center;}

    (Allerdings rutschen dadurch auch die Listenelemente in die Mitte)

    Das gleich Problem ist dann auch bei weniger hohen Bildern aufgetreten und der Zusatz „vertical-align:middle;“ funktioniert leider nicht. Das Bild rutscht immer an die obere kante. Was mache ich falsch? Wo fehlt welche Eintragung, dass alle Bilder sich immer an den imaginären Mittelachsen ausrichten?

    Danke und Gruß,
    Fabian

  18. Hallo Pascal,
    Glückwunsch, Respekt und Dank für Dein klasse Script!

    Noch eine (Anfänger?-)Frage ähnlich derjenigen von Fabian: ich habe unterschiedlich große Bilder. Obwohl ich im -Tag jeweils width und height angebe, werden sie alle in der gleichen Größe dargestellt. Wie kann ich das verhindern?

    Gruß Gerhard

    • Hi,
      verwendest du den Listenaufbau also mit ul und li und in den li’s sind dann die image Tags?
      Falls nicht versuch das mal, ich vermute du hast die Bilder auf oberster Ebene und deshalb passt das Script die Bildgrößen an.
      Liebe Grüße
      Pascal

    • Hallo Pascal,
      vielen Dank für Deine schnelle Antwort!

      Ich hab jedes Bild nun in einen div-Container gelegt und nun werden width u. height korrekt dargestellt.

      Wie bekommt man das mit den halbtransparenten Pfeilen in dem Beispiel oben auf dieser Seite hin?
      Gruß und danke
      Gerhard

  19. Hi,
    sehr schönes Script, gefällt mir sehr gut!
    Habe nur eine Frage: ist es Absicht, dass die Slideshow anhält, wenn ich eins der Bilder über die fssLi direkt anklicke? Wenn ja, gäbs ne Möglichkeit, die Slideshow dennoch weiterlaufen zu lassen?
    Gruß,
    Sebastian

    • Hi,
      ja ist Absicht und lässt sich abschalten, dazu gibt es allerdings keine Option.
      Öffne die nicht gepackte Version der SlideShow in einem Editor in entferne in Zeile 145 diese Funktion #145 stopAutoplay();
      Dann läuft sie immer weiter.

    • Einfach mal ohne es getestet zu haben !? ginge eine mehrfacheinfügung nicht per Iframe ?
      in meiner Seite habe ich kleine js. Slider in jedem DIV-Kacheltaster in einem Ifame eingefügt und mit einem Tranzparenten Bild (zum anklicken) überlagert !
      so müßte dieser Slider eigendlich auch gehändelt werden können ??
      … ohne überlagertes Tranzparentes Bild , so müßten die Steuerfunktionen verwendbar bleiben !

      Einfach mal ein Lob an Pascal Bajorat
      Sehr verständliche und ausfürliche Dialoge

      Gruß Ralf

  20. Hallo Pascal,
    zuerst Super Slideshow.
    Problem:
    habe diese auf 8 Seiten ( natürlich mit anderen Bild Aufrufen) eingebaut, bei mir auf dem Heimrechner klappt es ganz hervorragend.
    Wenn ich die Seiten mit den Slideshow auf unsere Seite lade wechselt die Show maximal 1x das Bild, danach sieht man nur das weitere Bilder aufgerufen weren, welche aber nicht erscheinen.
    Was mache ich falsch??

  21. Hallo Pascal,
    vieleicht schreibe ich dies jetzt zum zweitenmal? aber ich kann hier meine Frage nicht sehen.
    1.Super script
    2 bei mir auf dem Heimrechner klappt es wunderbar
    3.sobald ich es auf unsere Seite hochlade kommt 1 bis 2 Bilder dann ist Schluß.
    Habe das Script auf http://www.reise-marlies.de auf 8 verschiedenen Seiten eingesetzt, geht aber leider dort nicht, daher habe ich es erstmal wieder entfernt ( hier liegt beim Heimrechner, wie auch im Net alles in 1 Verzeichnis.)
    Was mache ich falsch?
    Habe natürlich jquery.js
    sowie FadeSlideShowmini.js
    FadeSlideshow.js
    sowie demoStyleSheet.css
    ebenfalls hochgeladen.

    • Hi Günter,
      klingt komisch, vom Einbinden her hört sich eigentlich alles richtig an.
      Auf Anhieb habe ich da leider keine Idee, vielleicht lädst du es einfach noch einmal hoch, dann gucke ich kurz, wenn es nur ein kleiner Fehler ist.
      Ansonsten kann ich dir den umfangreichen Support nur als „Plus Support“ bieten, siehe hier: http://www.pascal-bajorat.com/support/ bei Oberpunkt Software und Scripte und Plus Support für Software und Scripte.

      P.S. Die Kommentare hier müssen erst manuell von mir freigeschaltet werden.

      Beste Grüße
      Pascal

  22. Hallo Pascal,
    danke für die schnelle Reaktion.
    Habe jetzt die Seiten mit Slidshow überspielt, wenn möglich seh mal unter Ferienhaus der weisse Turm – 2 Bilder werden gezeigt – dann zählt er unten weiter – aber ohne di Bilder zu zeigen.

    Danke im voraus
    Günter

    • Hi,
      das Problem ist ganz einfach, wo keine Bilder sind, können auch keine angezeigt werden.
      Soll heißen, die Bilder existieren auf deinem Server nicht, wenn ich manuell versuche die Bilder aufzurufen, gibt es nur eine 404 Not found Meldung.

      Einfach mal die URL zu den Bildern prüfen und ggf. neu hochladen.

      Beste Grüße
      Pascal

  23. Hallo Pascal,
    zuerst einmal vielen Dank.
    Aber das wäre denn doch zu einfach gewesen.
    Habe zuerst alle Bilder gelöscht und dann komplett neu überspielt.
    Habe dabei einige Fehler in der Bildbezeichnung gefunden ( Groß/Klein)
    allerding ist noch irgendwo der Wurm drin.
    Manche Blder werden komplett angezeigt, bei anderen nur 2 oder 3 Bilder.
    Ich werde das ganze nochmals in Ruhe angehen und auch die Schreibweise überprüfen.
    Allerding verstehe ich nicht das es bei mir zuhause einwandfrei geht und im Netz nicht.
    Einstweilen ganz herzlichen Dank
    Gruß Günter

  24. Hi,
    das könnte daran liegen das dein Server case-sensitiv arbeitet, dein Computer aber nicht.
    Wäre zumindest eine Möglichkeit, sicher ist auf jeden Fall, dass der Fehler nicht in meinem Script zu suchen ist 😉

    Beste Grüße
    Pascal

  25. Hallo Pascal,
    habe jetzt mal alle JPG auf jpg geändert.
    Und siehe da es geht ( zwar habe ich noch nicht alle Fotos auf den Server gespielt aber es geht so weit.)

    Dir ganz herzlichen Dank Deine Slideshow ist das beste was ich gefunden habe ( ich habe viele gefunden)

    Und als Hinweis an Kollegen welche verzweifeln
    GROß oder klein ist auch in der Endng nicht ganz unwichtig.
    Nchmals HERZLICHEN DANK.

  26. Guten Abend!

    Wunderbares Tool, echt Klasse und simpel.

    Eine Frage hätte ich noch. Ist es möglich anstatt Zahlen, Text in der Kontrolliste zu haben. Ich habe eine Slideshow mit Bilder mit unterschiedlichem Inhalt (Fotos, Pläne, Text, alles jpgs) und würde dies gerne in der Kontrolliste auch unterscheiden, wäre echt klasse wenn das irgendwie geht.

    Kennt jemand da eine Lösung?

    Schönen Abend & beste Grüsse
    Daniele

  27. Hi Pascal. Sehr schönes Script – auch für Anfänger wie mich zu verwenden. Wo kann ich die Zahlenleiste unter dem Bild entfernen?

    Danke, Gruss
    Juho

  28. Hi Pascal,
    kann es sein, dass mit dem FF-Version 10.0.2 der Übergang von einem Bild zum Nächsten nicht mehr richtig funktioniert?
    Bei mir wird das Bild immer dunkler bis es schwarz ist und switched dann auf´s nächste Bild um. Es findet also kein „transparenter Übergang“ mehr statt 🙁
    Beim IE8, Chrome und Opera funktioniert es tadellos…

    Kannst Du das mal überprüfen?
    DANKE!!

    VG
    Frankie

  29. Hey Pascal!

    Erstmal ein großes Lob für diese Slidshow!

    Was ich feststellte ist, dass erst nach der Ermittlung des ersten Slide-Elements die Styles der nicht verwendeten Elemente auf display:none gesetzt werden. Das Problem, was dadurch entsteht ist, dass alle vorhergehenden Elemente einmal ganz kurz angezeigt werden, bevor der Slide startet.

    Hier ist nun meine Frage, ob es z.B. möglich ist mit dem ersten Element zu beginnen und nicht mit dem letzten?

    Ich habe vier divs und setzte den ersten drei davon einen style mit display:none, so das beim Aufruf der Seite erstmal nur das letzte Element angezeigt wird, mit dem der Slide startet.

    Das Ergebnis war, dass erst nach dem kompletten Durchlauf des ersten Slides aller Elemente mein gesetztes display:none durch display:block überschrieben wurde.

    1. Wie kann ich das Script so umstellen, dass das erste Element für den Start verwendet wird?

    ODER

    2. Wäre es nicht sinnvoll, alle Elemente außer das letzte hardcoded auf display:none zu setzen und dann beim Start des Slides sofort mit deinem Script auf display:block zu überschreiben, so wie es nach dem ersten Durchlauf passiert?

    Man merkt dieses Beispiel besonders stark, wenn man dein Script samt der jquery_min am Ende des body-Bereiches der Seite einbindet, so dass der HTML-Code vor dem jquery geladen werden kann und somit der Content-Aufbau nicht auf den jquery-Load warten muss. Dies ist meist bei größeren CMS sehr von Vorteil.

    Viele Grüße!

    • Nenne es „quick“ oder auch „dirty“… 🙂

      Aber ich konnte das Problem lösen, in dem ich den ersten drei von vier divs den style display:none verpasste und das vierte unverändert ließ. In der fadeSlideShow habe bei Zeile 54 folgend den Styles der child-elements den Wert display: ‚block‘ angehängt und siehe da, es funzt.

      Wobei es dennoch besser wäre, gleich das erste Element zu nutzen – d.h. sofern dies überhaupt möglich ist aber da bist du der jQuery Spezialist 🙂

      Viele Grüße

    • Hallo,

      @neralex: Die Idee ist gut, ich würde das allerdings komplett per CSS lösen und allen Items des Sliders display:none; zuweisen außer dem ersten Element (per first-child-Selector). Ergebnis: das erste Bild wird angezeigt und der Slider läuft ganz normal durch ohne ‚hektische Blitzer‘ bei PageLoad.

      Also so in der Art (je nach Implementierung heißen die Klassen natürlich anders):

      #slideshowWrapper ul#slideshow li { display:none; }
      #slideshowWrapper ul#slideshow li:first-child { display:block; }

  30. Hallo Pascal

    Danke für deinen klaren und intuitiven Slider. Ich hätte eine kleine Frage, welche ich bisher noch nirgends gesehen habe. Gibt es eine einfache Möglichkeit, den Slider mit einem zufällig ausgewählten Bild zu starten, anstatt dass er immer mit dem gleichen Bild beginnt?

    Grüsse aus der Schweiz.
    Christoph

    • Hi Christoph,
      aktuell nicht, außer du realisierst die Bildausgabe mittels PHP, dann würde es gehen oder du baust auf JS Basis deinen eigenen Zufallsgenerator für den Slider.

  31. Hallo Pascal,
    erstmal vielen dank für dein skript.
    Ich bin absoluter Anfänger was Websiten angeht aber es hat nach deiner Anleitung eigentlich soweit alles geklappt.
    Allerdings wird es nur im Internetexplorer richtig angezeigt im Firefox werden alle bilder, ohne slideshow, einfach untereinander aufgelistet?
    woran kann das liegen?
    Vielen Dank schonmal im vorraus

  32. Hallo Pascal,

    vielen Dank für Dein Skript und ich komme auch soweit zurecht. Ich habe die Slideshow dem Design entsprechend angepasst (übrigens die One-Page von PSD). Leider werden die Buttons zum weiter/zurück – klicken nicht angezeigt und ich finde den Fehler nicht
    (sind richtig verlinkt) wo kann hier der Fehler sein.

    omniboys.blinkfisch.de

    Liebe Grüße und einen sonnigen Tag

    • Die vor und zurück Buttons werden eigentlich von alleine generiert, außer du hast sie über die Plugin Optionen deaktiviert, check das am besten als erstes.

    • Hallo Pascal,

      danke für Deine schnelle Antwort. Die Buttons waren da, allerdings in der Mitte von der Webseite da es sich ja um eine One-Page handelt. Ich habe das ganze über Css gelöst
      Die postition auf relative gesetzt und neue Abstände vergeben. Ich weiß nun allerdings nicht ob das so optimal gelöst ist – funktionieren tuts 😉

      omniboys.blinkfisch.de

      Liebe Grüße

      Micha

  33. Hallo Pascal,

    klasse Arbeit 🙂

    WIE wäre es möglich
    – die slideshow per Button auf echtes Vollbild und zurück umschalten zu lassen?
    – die Direktwahlbuttons 1-4 (halbtransparent) am unteren Rand AUF die slideshow zu legen?

    Dankeschön im voraus 🙂
    Gruss

  34. Hallo Pascal,
    seit einiger Zeit ist auf einer webseite von mir deine simplefadeslideshow eingebaut. Soweit läuft alles bestens.

    Nun habe ich vor kurzem Dein Tutorial über responsive webdesign erworben, denn ich möchte meine Seiten für mobile Endgeräte anpassen. Dort ist alles gut erklärt und man kann es prima umsetzen.
    Eine Frage hätte ich dann doch noch:

    Wie und wo kann ich nun die Größe (width, height) Deiner Slideshow an unterschiedliche Bildschirmgrößen anpassen? Ist dies überhaupt möglich und ratsam für kleine Displays?

    Gruß Gerhard

  35. Hallo Pascal,

    Tolle Slideshow, DANKE dafür.
    Kann man bei Deiner Slideshow auch Captions mit Text hinzufügen??

    Irgendwie blicke ich da grad nicht durch oder stehe auf dem Schlauch 😉

    Lg Benny

  36. Hallo Pascal,
    zuerst Dein Script finde ich klasse und habe es in unsere Website eingebaut.
    Nur wenn die Seite zum erstenmal aufgerufen wird und es sind viele Bilder auf der Seite kommt es zum „zuck“ also alle Bilder werden sichtbar hintereinander geladen – erst danach kommt es zum ordentlichen Ablauf.
    Mache ich was falsch?
    Danke

  37. Ich habe eine ganz seltsame Erscheinung auf meiner Seite mit dem Plugin. In Verbindung mit der Einbindung des Plugins kann ich bei mir in Inputs und Textareas keine Leerzeichen machen !! Ich weiß nicht woran es liegt, aber sobald ich das Script raus schmeiße kann ich wieder Leerzeichen machen. Habt ihr damit Erfahrungen? Bitte meldet euch – auch gerne per FB http://www.facebook.com/fatih.piontek

  38. Hallo Pascal,
    prima Script!

    Ich hätte eine Frage – wie ist es möglich von „außen“ auf die internen Funktionen zuzugreifen (z.B. stopAutoplay()/autoplay()).
    Der Hintergrund ist der, dass ich per JS aus einer anderen Funktion die Animation starten/stoppen möchte…

    Vielen Dank und Beste Grüße
    hoje

    • Hallo hoje,

      nein direkt ist es leider nicht möglich, aber du könntest z.B. die Interval Variable global verfügbar machen und dann damit schon mal einen Start / Stop realisieren.
      Darüber sollte es eigentlich klappen.

      Beste Grüße
      Pascal

  39. Thema: Externe Steuerung.
    Danke für den Tipp. Per „clearInterval(intval);“ kann man die Slideshow stoppen (ein intval = false; nützt nichts) – nur starten geht dann nicht mehr…

    Beste Grüße
    hoje

  40. Noch einmal Thema externe Steuerung…
    Lösung für „Arme“… falls jemand das gleiche Problem hat.
    Einfach dem „PlayPauseElement“ noch den Event Handler focus (per bind) hinzufügen und schon kann man von „außen“ problemlos die Slideshow stoppen und weiterlaufen lassen…
    $(„fssPlayPause“).focus();

    Beste Grüße
    hoje

  41. Hallo Pascal,

    super slidshow ! Danke 🙂

    Allerdings schleichen sich auf meiner Galerie „falsche Bilder“ ein. Siehe Link.
    Meistens an Position 5,6 oder 7.
    Die falschen Bilder sind Teil vom Menu der Seite (soger der -hover wird in der Galerie angezeigt)
    Nach dem Neuladen der Seite erscheinen dann auch mal die richtigen Bilder
    und sind beim nächsten Durchgang wieder weg.

    Woran kann das liegen 🙁

    Gruß
    André

  42. Hallo Pascal, zunächst einmal ein riesen Dank für dieses Super Skript. Hat mir wirklich eine Menge arbeit erspart. Einziges Manko was ich gefunden habe ist, dass es nicht möglich ist mehrere Slideshows auf der gleichen Seite zu verwenden.

    Ich habe gelesen das dieses Feature in Planung ist, diese Aussage nun allerdings schon knapp 3 Jahre her ist. Wird das Skript noch weiter entwickelt?

    • Hallo Andre,

      sagen wir es einmal so: Das Scripte wurde leider eine ganze weile sehr stiefmütterlich behandelt und ich habe es tatsächlich auch nicht mehr großartig weiterentwickelt.
      Dies lag jedoch weniger an meinem Interesse der Slideshow oder den Nutzern gegenüber, als viel mehr an dem zeitlichen Mangel und anderen Projekten die auch betreut werden wollen.

      Ich habe jedoch vor gut einem Monat damit begonnen die Version 3.0 zu entwickeln, ich will an dieser Stelle keine Versprechungen machen, wann ich das Script fertigstellen werde, aber es geht weiter, so viel ist sicher.

  43. Hallo Pascal,

    erstmal danke für das tolle plug-in!
    Wie ist es wenn man folgendes Konstrukt verwenden möchte:

    Was muss man im Skript anpassen, damit es Funktioniert?
    Viele Grüße,

    Aissam

  44. Hallo Pascal,

    vielen Dank für dieses Script, ich glaube, dass ich das für unsere Homepage gut nutzen kann.
    Allerdings habe ich dann doch noch eine Frage:
    Ich möchte unseren Usern die Möglichkeit geben, Bilder selbst hochzuladen und möchte dann gerne diese Bilder per (php5+) scandir in die Slideshow einbinden. Ist das denn für einen Anfänger wie mich machbar oder muss ich mich auch erst in dieses Thema so langwierig einarbeiten wie in jQuery & Co?

    Vielen Dank für Deine (eventuelle) Hilfestellung!

    Liebe Grüsse aus Norwegen

    Marc

  45. Hallo Pascal,
    funktioniert alles tadellos.
    Wie schaffe ich es das, dass erste Bild im Slide schneller wechselt, als die folgenden.

    Lieben Gruß
    Dietmar

    • Hi Dietmar,

      du kannst nur ganz allgemein den „interval“ für alle Slider angeben.
      Dieser lässt sich nicht für ein einzelnes Bild setzen.

      Beste Grüße
      Pascal

  46. Hallo Pascal,

    habe nachfolgendes in meine Html Webseite eingegeben.
    Leider funktioniert die SlideShow noch nicht.
    Was fehlt da oder was ist falsch?
    Gruß Armin – eMail: [email protected]

    In body eingebracht:

    in head eingebracht:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.