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.
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: CSS, HTML, Image, JavaScript, Slider
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
Hallo,
ich habe den Part noch einmal für dich aktualisiert.
Es sollte allerdings selbsterklärend sein, wenn du dir die Demo der SlideShow herunterlädst, siehe hier: http://www.simplefadeslideshow.com/
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!
Freut mich, dann wünsche ich dir viel Spaß damit.
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
Über die Listenelemente gibt es quasi 4 Buttons du musst sie nur via CSS anpassen.
Ja habs schon 😉 danke. Gibt es noch eine Möglichkeit die Buttons zu bennenen? Also das 1 2 3 4 ersetzen?
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.
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
Hi,
das ist aktuell nicht möglich – sorry.
Ein Update ist allerdings in Planung.
Ist zwar nun ein Jahr her aber…
kommt dieses Update bald?
Zudem wäre eine randomize Option nicht schlecht.
Dann wäre es perfekt 🙂
Hi Paul,
ich hätte ja gerne an der Slideshow weiterentwickelt, aber du Zeit ist immer so am rennen… :/
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
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)
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
Tag,
ja das ist ohne weiteres möglich – Bilder / Videos / Text – was du willst.
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
Ja, es geht ohne Probleme.
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.
Einfach dem li eine background-color geben.
Nettes Plugin. Genau danach habe ich gesucht. Ein Leichtgewicht und äußerst flexibel. Weiter so.
Liebe Grüße,
Jakob
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
Hi,
also die Slideshow ist so angelegt, dass es funktionieren müsste, aber der IE ist ja voll von Bugs.
Welche IE Version hast du den getestet?
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 😉
Auf anhieb habe ich da leider keine Lösung parat, tut mir leid. Ich weiß nur das der IE 6-8 generell ein paar Probleme bei den Transitions haben.
Ok, kein Problem.
Trotzdem vielen Dank!
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
Hi,
ja gibt es: ImScript wird die höchste Höhe angegeben und den einzelnen Div’s oder Li’s gibst du dann die dynamischen kleineren Höhen.
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
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
Hm, das ist mir bis jetzt noch nicht aufgefallen, muss ich mir mal anschauen.
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
Hi,
der Fehler ist mir nicht bekannt, schick mir deinen Link doch bitte einmal per Email.
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
Hi,
ja einfach den Hintergrund der LI’s entsprechend einstellen.
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.
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.
🙂
Das freut mich, genau so soll es ja auch sein, danke Jonas.
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
Hi,
freut mich wenn dir die SlideShow gefällt, die Preload Funktion muss unbedingt mal rein, aber wie das immer so ist: Es fehlt die Zeit. 🙁
Lieben Gruß
Pascal
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
Hi Fabian,
setz mal den li text-align:center und nicht den gesamten SlideShow Wrapper.
vertical-align funktioniert nur in Tabellen.
Grüße
Pascal
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
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.
Super, danke dir! 🙂
hallo,
super teil !!!
aber wie kann ich 2 dieser slideshows in eine seite einbauen ?
hab schon ein wenig rumprobiert aber funzt net…
hilfeeee !!
lg chris
aktuell nicht möglich, sorry
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
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??
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
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
Wo finde ich die Seite denn? Kannst du mal den Link posten, bitte.
Hallo Pascal.
Die Seite:
http://www.reise-marlies.de/torre.html
( nur als ein Beispiel)
ansonsten ist bei den jeweils obigen zb. Ferienwohnung dann die obesten 6 bilder abklicken dann kommt die beschreibungsseite wo die Slideshow jeweils eingebaut ist.
Danke
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
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
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
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.
Kein Problem, freut mich wenn sie dir gefällt.
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
Hi Daniel,
ja das geht, dazu musst du das Script allerdings etwas modifizieren.
Falls du kein JavaScript kannst oder umfangreichere Hilfe benötigst, gibt es hier Support Infos: http://www.pascal-bajorat.com/support/
Beste Grüße
Pascal
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
Hi,
das steht oben in der Doku, einfach die Option „ListElement“ auf false setzen.
Liebe Grüße
Pascal
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
Hi Frank,
konnte den Fehler in meinem FF 10.0.2 nicht reproduzieren …
Beste Grüße
Pascal
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; }
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.
Super Script, werde ich gleich mal testen. Mit ein bisschen Umbau dürfte es so sein wie ich es möchte – vielen Dank! 🙂
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
Wenn du den CSS-Code oder das JavaScript geändert hast, dann daran.
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
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
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
Hi Gerhard,
du könntest das ganze einfach über CSS lösen.
Also per media query in der demoStyleSheet.css und nicht im jquery auf der Seite selbst?
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
Ja, kann man, muss allerdings in die Slides mit CSS und HTML selber eingebaut werden.
Hallo Pascal,
Danke hab’s unterdessen hinbekommen!
Stand nur auf dem Schlauch und hab den Fehler nicht gesehen 😉
LG
Okay super, freut mich wenn es funktioniert.
Hi,
die minfied-Version ist leider voller Fehler… Mein Firebug meckert wegen lauter fehlender Klammern und Semikolons.
Danke für den Hinweis, bitte mal die unkomprimierte Variante probieren.
Schon erledigt, funktioniert einwandfrei. 😉
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
In dem Script ist kein Preloader, daher ist es normal.
Hallo Pascal,
gibt es denn eine Möglichkeit dieses „Zucken“ zu unterbinden?
Danke
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
Ja der Fehler ist bekannt, bitte die Tastatursteuerung abschalten, korrigiere den Fehler in der nächsten Version.
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
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
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
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é
hier noch der Link
http://www.ballettschule-pecheuse.de/galerie.html
Danke 🙂
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.
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
Hallo Aissam,
bitte nutze unser Kontaktformular für Fragen die Codezeilen betreffen. Unser Spam-Schutz bereinigt diese Bereiche leider.
Vielen Dank!
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
Hallo Marc,
wenn du bisher noch nicht mit PHP gearbeitet hast, wirst du dich hier sicher auch etwas einarbeiten müssen.
Schau dir am besten einmal die Funktion an: http://php.net/manual/de/function.scandir.php
Eigentlich solltest du da mit relativ wenigen Schritten zum Ziel gelangen.
Beste Grüße
Pascal
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
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:
In den Kommentaren ist kein HTML Code möglich.