Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Einfache jQuery Slideshow mit Vor- und Zurück-Button
<script type="text/javascript" src="/wp-content/themes/andreknieriemv3/resources/js/slide.js"></script>
In diesem Tutorial zeige ich, wie man eine simple, aber funktionstüchtige und schöne Slideshow mit jQuery erstellt. Die Funktion kann den eigenen Wünschen angepasst werden und ist auch für Text, oder sonstige Elemente geeignet.
Was wird benötigt?
- jQuery
- Grundkenntnisse von Html und jQuery
Html Grundgerüst
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
<div id="slideShow">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
<div class="next"></div>
<div class="prev"></div>
</div>
CSS
#slideShow {
position: relative;
width: 700px; /*kann natürlich angepasst werden auf eure Größen */
height: 360px; /*kann natürlich angepasst werden auf eure Größen */
}
#slideShow img {
position: absolute;
display: none;
left: 0;
top: 0;
}
/* Die Vor und Zurückbuttons könnt ihr so stylen und hinpacken wo ihr wollt beispielsweise so*/
#slideShow .next {
width: 20px;
height: 360px;
position: absolute;
background-color: #ccc;
cursor: pointer;
right: 0;
}
#slideShow .prev{
width: 20px;
height: 360px;
position: absolute;
background-color: #ccc;
cursor: pointer;
left: 0;
}
Man benötigt einen Container, in dem wie bei meinem Beispiel die Objekte sind, die in die Slideshow sollen. Die Vor. und Zurück-Knöpfe müssen nicht unbedingt in den Container, ich bilde es aber so ab, wie es oben zu sehen ist.
Als nächstes bauen wir die jQuery Funktion:
slide.js
function slideSwitch(switchSpeed) {
var $active = jQuery('#slideShow img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow img:last');
var $next = $active.next('img').length ? $active.next('img')
: jQuery('#slideShow img:first');
$active.addClass('last-active').fadeOut(switchSpeed);
$next.addClass('active').fadeIn(switchSpeed);
$active.removeClass('active last-active');
}
jQuery(function() {
interval = "";
jQuery('#slideShow img:first').css("display", "block").addClass('active');
interval = setInterval ( "slideSwitch(1000)", 4000 );
});
Diese Funktion startet die Slideshow und wechselt alle 4 Skunden das Bild.
Nun wollen wir aber noch nen Vor- und Zurückknopf haben.
Also fügen wir unter der Funktion noch 2 Funktionen hinzu.
Also so:
jQuery('#slideShow img:first').css("display", "block").addClass('active');
// Die Next Function haben wir in der eigentlichen Funktion ja schon drin, also rufen wir die
// Funktion auf und stoppen das Intervall, damit die Slideshow nicht weiterlaeuft
jQuery(".next").click(function() {
clearInterval(interval);
slideSwitch(1000);
});
// Nun die Zurueck-Funktion
jQuery(".prev").click(function() {
clearInterval(interval);
var $active = jQuery('#slideShow img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow img:first');
var $next = $active.prev('img').length ? $active.prev('img')
: jQuery('#slideShow img:last');
$active.addClass('last-active').fadeOut(1000);
$next.addClass('active').fadeIn(1000);
$active.removeClass('active last-active');
});
Das war auch schon alles. Ich hoffe ich konnte euch damit weiterhelfen. Für Anregungen und Verbesserungen der Funktion bin ich offen.
Kommentare
Folgendes Problem, ich habe auf meiner Seite eine SlideShow eingebunden, nun möchte ich aber auf der selben seite / rechten Seiten ebenfalls einen SlideShow einbinden. Quasi Bildergalerie vorher/nachher.
Wie mache ich es am besten? In der Js einfach die andere SlideShow ID mit Komma ersetzen? Alle?
Sprich so?
function slideSwitch(switchSpeed) {
var $active = jQuery('#slideShow, #slideShow2, img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow, #slideShow2 img:last');
ich wollte mal fragen wo ich denn die slide.js Datei hintun soll ?
Ich kann bisher nur die zwei Pfeile sehen aber nicht das Bild/die Bilder. :/
Ich hoffe du kannst mir helfen...
Würde die Bilder in der Slideshow jeweils gerne mit einem Link versehen. Sobald ich den Link eingefügt habe widerholt sich allerdings immer nur das erste Bild.
Viele Grüße
André
Außerdem habe ich noch Probleme mit der richtigen Darstellung... Ich würde gerne das sich die Slideshow so verhällt wie die restlichen DIVs... also das sie die volle Breite behällt und wenn ich das Fenster verkleinere oder die Ansicht auf einem Smartphone habe das das bild oder der DIV zentriert dargestellt wird und die ränder abgeschitten sind ....
vielen Dank für dein Tutorial.
Kann ich auch 2 Bilder gleichzeitig (nebeneinander) anzeigen?
habe jetzt ausschließlich CSS und js vom Tutorial verwendet und neue Seite erstellt mit nur dem Sliderdrauf und funktioniert alles soweit gut. Nur Vor und Zurück Knöpfe gehen nicht. Vielleicht kannst du mir ja mal eine slide.js und css datei zum abgleich schicken info@cycle-point.com.
Mit dem vor zurück krieg ich irgendwie nicht hin. lg ts
habe dir eine HTML Datei geschickt, bei der es funktioniert.
Grüße
André
danke für die tolle Hilfe. Ich konnte jetzt den Slider ohne Probleme in meine HP integrieren, trotz meiner geringen Erfahrung. Auch die weiteren Tipps mit Verlinkungen und so weiter, die man hier so nachlesen kann, waren sehr hilfreich. Nochmals vielen Dank !
habe am Wochenende Dein Toutorial durchgearbeitet. Obwohl ich nicht viel Ahnung habe habe ich zumindest die Bilder zum Sliden gebracht.
Leider geht die vor und zurück Funktion nicht und ich weiss nicht woran es noch liegen könnte ?
LG TS
vielleicht passt eine Klasse oder eine ID in deinem HTML nicht richtig? Wenn der Vor und Zurück Knopf auch an einer anderen Stelle im HTML ist, kann es auch zu Fehlern kommen.
Grüße
André
Ohne Probleme mit den Weiterklicken?!
mit dem jetzigen Code ist das nicht möglich, ist aber nicht viel notwendig, um dies zum Laufen zu kriegen. Wenn du Hilfe dabei brauchst, sag bescheid ;)
Programmierung ist nicht meine Baustelle. Somit stellt sich für mich die Frage wie ich unkomplziert mehrere Slideshows auf einer Seite zum laufen bekomme... geht das überhaupt?
Es klappt soweit, jedoch werden nach Klick auf einen Vor oder Zurück Button alle Slides aktiviert... Wolfgang
dafür müsstest du die Selektoren anpassen. Bei dem Klick auf next oder prev nur die Slideshow auswählen, die auch gewollt ist. Also sowas wie
var $active = jQuery(this).parents('#slideShow img.active');
Wobei eine ID immer nur einmal pro HTML Seite auftauchen darf. Also solltest du das auf eine Klasse ändern (Also . statt #)
Grüße André
Kannst du mir bitte helfen
Ich habe deine Codes so wie es ist übernommen und nur die Pfade angepasst ich komme nicht drauf woran es liegen kann warum die Vor und Zurück Leiste ohne Funktion ist.
Hier der Link zu meinem versuch ( http://akin-3d.com/flohmarkt/ )
Und
Noch eine Frage wie kann ich die Bilder von Links nach Rechts Sliden lassen. Hast du da auch einen Code.
Mit freundlichen Grüßen
Akim aus Berlin
das Problem liegt glaube ich dadran, dass der untere Code hier rein muss:
jQuery(function() {
also direkt unter:
interval = setInterval ( "slideSwitch(1000)", 4000 );
da wo der Code jetzt steht wird er ausgeführt, ohne dass das das "Dom ready" ist, also bevor die HTML Struktur komplett da ist guckt das Javascript schon. Da sind die Buttons dann noch nicht da und deswegen gehen diese nicht.
Grüße
André
Mit freundlichen Grüßen
Akim aus Berlin
Grüße André
Wenn ich dem #slideShow img einen Rahmen zuweise, wird der ja jedesmal mit ein- und ausgeblendet.
MfG.
var imgHeight = $('#slideShow img').height();
$('#slideShow').height(imgHeight);
Mal als kleiner Ansatz.
Grüße
der Slider sieht bei nem Kollegen von mir ganz gut aus. Nur bei mir funktioniert er nicht wirklich.
Ich sehe nur das erste Bild und in "Developer Tools" von Chrome wird mir alle vier Sekunden (das switchen funktioniert also anscheinend schonmal) der Fehler angezeigt:
Uncaught ReferenceError: $active is not defined
und zwar an der Stelle:
var $next = $acitve.next('img').length ? $active.next('img')
Definiert wird er ja so:
var $active = jQuery/('#slideShow img.active');
Wo könnte da der Fehler liegen? Ich find ihn einfach nicht :(
Vielen Dank schonmal im Voraus und Grüße,
Flo
Wenn das auch nicht hilft, dann zeig mir mal deine Testseite ;)
Gruß André
der Slider funktioniert jetzt ja, aber die Vor- und Zurück-Buttons sehe ich noch nicht.
function slideSwitch(switchSpeed) {
var $active = jQuery('#slideShow img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow img:last');
var $next = $active.next('img').length ? $active.next('img')
: jQuery('#slideShow img:first');
$active.addClass('last-active').fadeOut(switchSpeed);
$next.addClass('active').fadeIn(switchSpeed);
$active.removeClass('active last-active');
}
jQuery(function() {
interval = "";
jQuery('#slideShow img:first').css("display", "block").addClass('active');
interval = setInterval ( "slideSwitch(1000)", 4000 );
});
jQuery('#slideShow img:first').css("display", "block").addClass('active');
jQuery(".next").click(function() {
clearInterval(interval);
slideSwitch(1000);
});
jQuery(".prev").click(function() {
clearInterval(interval);
var $active = jQuery('#slideShow img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow img:first');
var $next = $active.prev('img').length ? $active.prev('img')
: jQuery('#slideShow img:last');
$active.addClass('last-active').fadeOut(1000);
$next.addClass('active').fadeIn(1000);
$active.removeClass('active last-active');
});
Was könnte da los sein?
ist schon eine feine Sache.
Gibt es eine Möglichkeit, Untertitel mit einzublenden für jedes Foto?
Grüße
Bernd
möglich ist alles ;) Dafür muss man nur ein paar Änderungen vornehmen. Kannst du ein wenig Javascript/jQuery? Also ich würde es so machen, dass ich das HTML so umbaue, dass es immer div-Container im 'slideshow' div sind. In dem Container sind dann das Bild und in einem span-Tag der Title. Dann musste noch das JS anpassen, dass er div anstelle von img nimmt und dann wars das schon fast. Das span noch via CSS an die Stelle schieben, die du möchtest und voila.
Grüße
mit den div's im slideshow Container hatte ich schon versucht, dann wird immer nur das erste Bild angezeigt.
Kann es daran liegen, dass im slideshow container eine for Schleife für die Bilder arbeitet, damit ich die Bilder zufallsmäßig anzeigen lassen kann?
Gruß
Bernd
Grüße
in Deinem Beispiel hast Du die img ausgabe aufgeführt
als
< img......
< img
< img...
Ich habe eine
< img ...
Ausgabe und ersetze halt den Dateinamen durch den Arraywert.
das funktioniert ja auch alles einwandfrei.
Habe halt nur Probleme damit, die Untertitel mit einzufügen.
Deinen Rat habe ich befolgt und die img ausgabe in einen div container gepackt und in der slide 'img' durch 'div' ersetzt.
aber dann streikt die kpl. Bildausgabe, bzw. zeigt immer nur das erste Bild.
Gruß
Bernd
Gruß
Bernd
Grüße
habe da noch mal rumprobiert.
Deinem Rat entsprechend funktionierte es auch so, dass der div Container, in dem das img Tag ist, angesprochen wurde und auch wechselt, aber es wird dann kein Bild mehr angezeigt.
Ich habe es auch mit .. div,img in der slide.js.
Alles ohne Erfolg. Entweder wechselt der Container oder das Bild. Es wird nur das erste Bild angezeigt oder der der erste Untertitel.
Werde mich bei Gelegenheit noch mal damit beschäftigen.
Erst einmal vielen Dank für Deine Bemühungen.
Gruß
Bernd
Grüße
http://bistro-casablanca.de
(noch in Arbeit)
Gruß
Bernd
eigentlich nicht. Ich habe jetzt nochmal mit verschiedenen Browsern probiert - die Seite öffnet ganz normal.
Ggf. kann ich Dir die php Datei auch mal schicken, da im Moment auf der Seite ja die funktionierende Version ist.
in der php sind die Schritte natürlich besser ersichtlich.
Gruß
Bernd
nein, muss ich dann gesondert auf meine Adresse mal hochladen.
Wird aber dann nächste Woche werden.
Oder wie bereits angeboten, kann ich Dir die PHP schicken, da sind mehrere Möglichkeiten als Versuchsaufbau
Gruß Bernd
auch von mir ein DANKE! Lange gesucht und endlich was schönes gefunden!
Kannst du mir evtl. sagen ob es hier serverseitig Mindestanforderungen gibt? z.b. PHP Version oder ähnliches.
Denn auf deiner Seite läuft es bei mir und auf der anderen die exakt selbe Seite nicht. Der einzige Unterschied sind die PHP Version und ein paar Einstellungen dort.
Danke und Gruß,
Mark
Grüße Andre
ich bin mir nicht sicher ob meine Nachricht noch gelesen wird aber ich dachte ich kanns ja mal versuchen.
Zunächst einmal -> DANKE!
Hab bestimmt 2 Stunden gesucht bis ich endlich eine einfache und sinnvolle Slideshow gefunden hab, die genau das macht, was ich möchte udn nicht mehr!
es ist schon fast ungewöhnlich mal vernünftige Hilfe zu bekommen, ohne dafür zahlen zu müssen! an dieser Stelle nochmals Vielen Dank
(;
Nun zu meinem Problem :
hab nun hier und da ein wenig rumprobiert aber leider den Fehler nicht gefunden. Das macht mich noch irre (wie man an der aktuellen Uhrzeit sicher erkent)
Habe alles so eingebaut wie oben beschrieben aber leider funktionieren Die next & prev Button nicht. Der Bildwechlser läuft und sonst passt auch alles.
nur warum die Button nicht wollen is mir n Rätsel. Vll. kann mir da jmd weiterhelfen?
Vielen Dank und liebe grüße aus Ostfriesland
Fabian
Super, dass dir meine Slideshow gefällt.
Ich kann dir sicherlich helfen. Hast du mal einen Link da, dass ich vielleicht schauen kann, was Sache ist? Hast du dir mein Beispiel oben angeschaut? Da funktioniert ja alles wie es sollte.
Grüße
André
bin gerade über dein Tut gestolpert.
Leider funktionieren deine Vor- und Zurückbuttons nicht bzw. sind nicht sichtbar.
Und wie ich aus den Kommentaren lesen kann, würden dem Tut CSS-Angaben und ein wenig mehr Erklärung zum Code, gerade für einen Anfänger, ganz gut stehen. So tippen alle es einfach ab bzw. nutzen C&P und das war's.
Beste Grüße,
Ulf
CSS wird sofort oben ergänzt!
Wieder was Neues gelernt.
du hattest recht, die Slideshow läuft jetzt, allerdings hätte ich noch zwei Fragen.
1. Die Slideshow fängt jetzt wesentlich später an zu laufen, d.H. es dauert ca. 10 Sek. bis die erste Animation beginnt, danach läuft sie flüssig weiter, ist das normal?
2. Ich würde die Bilder gerne verlinken, ich könnte das ja z.B. mit onclick lösen ohne die slide.js bearbeiten zu müssen. Allerdings würde ich das lieber mit einem Anker lösen - kenne mich aber gerade mit jQuery überhaupt nicht aus. Könntest du mir da evtl. zumindest einen Lösungsansatz geben?
Vielen Dank bis hierhin ;)
Aber davon kann ich nur abraten.
Leider bin ich nicht ganz so firm in Javascript. ich habe die Slides nun mit einem a-Tag ummantelt, da ich sie verlinken will, Was muss ich denn im slide.js ändern, damit des funktioniert? Über eine Antwort würde ich mich sehr freuen.
Viele Grüße
Joachim
Grüße
André
na klar, das CSS war es ;-) Danke Dir sehr und an alle: Im CSS muss das img auch noch durch das a ausgetauscht werden.
Vielen Dank und nochmals Danke!
Joachim
Grüße
André
danke für das Tutorial, nur leider arbeitet das Skript auf meiner Seite irgendwie anders. Das Bild wird zwar ausgeblendet, aber das nächste Bild wird nicht zeitgleich eingeblendet sondern erscheint unmittelbar nach dem ausblenden direkt (also Zack - Bild ist da). Woran könnte das liegen?
Vielen Dank
habe die seite mal eben hochgeladen:
http://www.philamande.de/NextGenWeb/index.html
Habe das active attribut im Stylesheet nicht verwendet.
habe die Seite mal hochgeladen. Habe die :active Pseudoklasse im stylesheet nicht verwendet. Habe gestern abend noch etwas rumprobiert, aber kam zu keinem Ergebnis.
Dann klappt es auch :)
Es ist ein Bug von Firefox.
Ich hoffe ich konnte dir helfen :-)
danke für den Tipp! Hatte mich schon gewundert was das ist ;)
habe eine css Klasse mit meinbutton erstellt. Danach im jQuery jQuery(“.meinbutton”).click(function() { clearInterval(interval); slideSwitch(1000); }); die klasse geändert.Nun kommt dass Problem.
Wenn ich nun mein Bild in die Div Box ( <img src (hier mein Bild einbaue)passiert gar nicht. Ich möchte über das Bild einen Event Händler (onclick) starten und die zurück und vorwärts Funktion starten.
Leider bringe ich dass nicht hin.Vielleich kannst du mir helfen .
Danke
G.Pfeiffer
Ich möchte einen weiter Button als Bild in die Div Box einbauen.
Verstehe leider nicht wie ich dann die next funktion über onclick starten kann.
Vielen Dank für Ihre Hilfe.
Pfeiffer
jQuery(".next").click(function() { clearInterval(interval); slideSwitch(1000); });
.next heißt die Klasse next wird geklickt. also machst du den Button mit der klasse .meinbutton und änderst oben das .next in .meinbutton. Ist es eine id dann #meinbutton.
Hoffe konnte ich konnte dir weiterhelfen
Du musst einfach an deinen Bildcontainer, folgendes Css hängen.
left: 0;
margin: 0;
position: absolute;
top: 0;
ich bin gerade auf deine Seite gestoßen und versuche nun die slideshow in meine Seite zu integrieren,
da sie schön schlicht ist. Vielen Dank erstmal für das Tutorial. Leider habe ich Probleme mit der Einbindung.
auf meiner Seite kannst Du schauen wie sich das Problem äußert. Die Bilder werden untereinander angezeigt
und sind am Anfang nicht unsichtbar. Liegt es an der Formatierung des div-tags oder an der slide.js?
Meine Bilder sollen nicht gleich groß sein. Außerdem würde ich gern auf die automatische (zeitbasierte) Variante der Slideshow verzichten, und nur bei Mausaktion einen Bildaustausch erzeugen.
Leider bin ich nicht besonders fit was html, CSS und Co. angeht. Wär schön, wenn Du einen Tipp hast.
Falls nicht erstmal vielen Dank für deine Arbeit.
Beste Grüße
Lennart
Hinterlasse einen Kommentar