• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Jquery - Per Click Background image ändern - oder Carousel?

LikeStar

New member
Hallo Community,

ich bin am Bauen einer responsive Seite. Diese passt sich gewöhnlich "fast" immer der Auflösung an.

Ich habe auf die Schnelle ein Bild gemalt.
Im Anhang befindet sichr nur ein Beispiel Bild, damit man sich ein Bild davon machen kann.
Wenn man die Seite minimiert, passt sich das Bild der Auflösung an.

Auf dem Bild kann man gut Pfeiltasten erkennen <- und ->

Ich möchte einen sog. Bildwechsel / Slider haben, sobald man auf eines der Pfeiltasten klickt.

Sollte ich lieber Background image geändert werden, oder einen richtigen Slide Carousel einbauen?

bild.jpg
 
Ich bin der Meinung, das hängt von deiner Vorstellung ab, wie die Seite aussehen soll: Wenn die Bilder die ganze Seite ausfüllen sollen und der Inhalt daraufl, musst Du die Bilder als Hintergrund anlegen. Wenn der Inhalt dagegen um den Slider herum liegen soll, darüber, darunter und daneben, musst Du einen normalen Slider nehmen. Für beides gibt es eine ganze Reihe von vorgefertigten Plugins, bei den normalen Slidern auch responsiv. Auf meiner eigenen HP benutze ich Swiper, wo der Inhalt die Seite horizontal ausfüllt, wie auf deinem Bild.
 
Zuletzt bearbeitet:
Ich bin der Meinung, das hängt von deiner Vorstellung ab, wie die Seite aussehen soll: Wenn die Bilder die ganze Seite ausfüllen sollen und der Inhalt daraufl, musst Du die Bilder als Hintergrund anlegen. Wenn der Inhalt dagegen um den Slider herum liegen soll, darüber, darunter und daneben, musst Du einen normalen Slider nehmen. Für beides gibt es eine ganze Reihe von vorgefertigten Plugins, bei den normalen Slidern auch responsiv. Auf meiner eigenen HP benutze ich Swiper, wo der Inhalt die Seite horizontal ausfüllt, wie auf deinem Bild.



Kannst du mir bitte ein Beispiel nennen?

Die Div Ebene wurde schon mit folgendem CSS Code hinterlegt: "Background-image:"

Aber beim Wechseln bzw. beim Klicken sollen schon 4-5 Bilder zu sehen sein. Wie soll ich denn bitte per Klick die Background Images wechseln?
Danke :)
 
Wie soll ich denn bitte per Klick die Background Images wechseln?
Wie ich schon schrieb, brauchst Du das nicht selber zu programmieren, sondern dafür gibt es fertige Plugins mit schönen Übergangseffekten. Google mal nach "jquery plugin background slider", dann findest Du sie. Das automatische Sliden kann man meistens ausschalten, wenn Du möchtest, dass die Bilder nur durch Mausklick gewechselt werden sollen. Supersized z. B. hat in der Demo solche Buttons. Und wenn Du Probleme bei der Integration hast, helfen wir dir weiter.
 
@Sempervivum

Danke für deine Antwort.

Dein "Swiper" Plugin kostet leider Geld! : - )
Oder irre ich mich da?

Mein CSS Code:
HTML:
#image1   {width:100%; height:600px; position:relative; }
#image1   {background-position:center; backgound-size:cover; float:left; background-image:url('images/bild1.jpg')}
#image1   {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover}

Edit: Habe mir eben Swiper angeschaut.
Das ist alles viel zu kompliziert und aufwändig.

Es muss doch eine Möglichkeit geben die ID image1 mit Jquery zu beinflußen. Ohne irgendwelche Extra CSS und Ajax Dateien.
 
Zuletzt bearbeitet:
Nein, Swiper kostet kein Geld:
Swiper - is the free and ultra lightweight mobile touch slider


Es muss doch eine Möglichkeit geben die ID image1 mit Jquery zu beinflußen
Natürlich:
Code:
$("#image1").css("background-image", "url('images/bildx.jpg')");
oder mit Klick auf Buttton:
Code:
$("#buttonnext").click(function() {$("#image1").css("background-image", "url('images/bildx.jpg')");});

Dabei hast Du aber keine Übergangseffekte wie bei den fertigen Slidern.
 
Zuletzt bearbeitet:
Sempervivum

danke für deine Rückmeldung. :)

Mit diesem Code funktioniert der Wechsel:

jquery:
Code:
jQuery(document).ready(function(){
$("#next").click(function() {
 $("#image1").css("background-image", "url('images/hotel2.jpg')");

	});
});

:)

Aber, alles schön und gut. Nur, möchte ich mindestens

bild1
bild2
bild3
bild4

mit den Pfeilbuttons steuern.

Wieso soll ich das jetzt bitte hinkriegen? :confused:
Jetzt verstehe ich wieso du diesen swiper benutzt ; - )
 
Am einfachsten ist es, wenn Du die Bilder durchnummerierst:
Code:
jQuery(document).ready(function(){
    iImg = 1;
    maxImg = 4;
    $("#next").click(function() {
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
        if (iImg == maxImg) iImg = 1; else iImg++;
    });
});
und für den Zurück-Button analog iImg erniedrigen.

Wenn Du die Bilder nicht durchnummerieren willst, legst Du am besten ein Array mit den Dateinamen an.
 
@Sempervivum

bist du zufällig online? :p

Dein Code funktioniert, wie schon erwähnt, einwandfrei. Aber dürfte ich dir noch bzgl. der Pfeiltasten eine Frage stellen?


Es geht mir um prev und next Funktion. Wenn ich die "<" Taste tätige, erscheint zwar
das nächste Bild, aber mit der ">" kann kehrt das Bild, welches zuvor eingeblendet wurde, nicht mehr zurück.

Also im Prinzip ist das nur eine next One Funktion. Ich hoffe ich konnte es einigermaßen verständlich erklären :)))))))
 
Hast Du das umgesetzt? Poste doch mal deinen Code für den Prev-Button.

Danke für deine schnelle Rückmeldung. Verstehe das "Erniedrigen" nicht, wie du es beschreibst.


HTML:
jQuery(document).ready(function(){
    iImg = 0;
    maxImg = 4;
    $(".links, .rechts").click(function() {
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
        if (iImg == maxImg) iImg = 1; else iImg++;
    });
});

Habe sinnvollerweise nach dem .links noch ein .rechts miteingebaut. Was ja auch funktioniert. Also die Pfeiltaste links und die Pfeiltaste rechts können betätigt werden.


Ich würde sagen, iImg = -1 (also ein minus)? Richtig?
 
Nein, so geht es leider nicht, denn so bekommen beide Tasten die selbe Funktion, nämlich vorwärts in den Bildern zu blättern. So ist ist es richtig:
Code:
jQuery(document).ready(function(){
    iImg = 0;
    maxImg = 4;
    $(".rechts").click(function() {
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
        if (iImg == maxImg) iImg = 1; else iImg++;
    });
    $(".links").click(function() {
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
        if (iImg == 1) iImg = maxImg; else iImg--;
    });});
Erniedrigen geht entweder mit iImg = iImg -1; oder kürzer mit iImg--;
 
Nein, so geht es leider nicht, denn so bekommen beide Tasten die selbe Funktion, nämlich vorwärts in den Bildern zu blättern.

Ja. Ich weiss. Ist ja auch irgendwie logisch, dass die 2 Tasten die selbe Funktion bekommen. :)

Gerade am Einbauen und festgestellt, dass beim 1. Mal klicken, vorerst ein Bild erscheint, welches eigentlich
gar nicht hätte dargestellt werden sollen.

Beim 2. Mal klicken, wie geplant, funktioniert die prev und next Funktion einwandfrei.

Ich versuch mein Glück. Aber würde mich über ein Tipp sehr freuen.

Edit:

Meine Bilder sind wie folgt durchnummeriert:

hotel0
hotel1
hotel2
hotel3
hotel4

Edit²:
Nein, es funktioniert anscheinend nur einmalig. Sobald ich erneut die 2. Pfeiltaste drücke, kommt
ein komplett anderes Bild. Ich überlege gerade wieso und weshalb...
 
Zuletzt bearbeitet:
Das Skript ist dafür ausgelegt, dass die Bilder von 1 an durchnummeriert werden und maxImg die Nummer des letzten Bildes ist.
Ich habe jedoch noch einen Fehler gemacht, der dazu führt, dass beim ersten Klick überhaupt nichts funktioniert. So ist es richtig:
Code:
jQuery(document).ready(function(){
    iImg = 1;
    maxImg = 4;
    $(".rechts").click(function() {
        if (iImg == maxImg) iImg = 1; else iImg++;
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
    });
    $(".links").click(function() {
        if (iImg == 1) iImg = maxImg; else iImg--;
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
    });
});
 
Zuletzt bearbeitet:
@Sempervivum,

gibt es eigentlich alternativ auch die Möglichkeit, nach Wunsch,
statt Background-image, das Bild innerhalb des Div's zu ändern?

Ich bin nur neugierig.


HTML:
<div id="image1">
 <img src="bilder/hotel1.jpg alt="hotel" />
</div>

Also Bildwechsel mit einem src="" Change?
 
Natürlich. Dazu gibst Du einfach dem Bild die ID und tauschst es folgendermaßen aus:
Code:
$("#image1").attr("src", "url-deines-bildes");
d. h. Du änderst mit jQuery das src-Attribut.
 
Zuletzt bearbeitet:
Natürlich. Dazu gibst Du einfach dem Bild die ID und tauschst es folgendermaßen aus:
Code:
$("#image1").attr("src", "url-deines-bildes");
d. h. Du änderst mit jQuery das src-Attribut.

Ich habe testweise mal den Code entsprechend umgeändert. Dieser schaut jetzt so aus.
:concern:

HTML:
<script type="text/javascript">
jQuery(document).ready(function(){
    iImg = 1;
    maxImg = 4;
    $(".rechts").click(function() {
        if (iImg == maxImg) iImg = 1; else iImg++;
        $("#image").attr("src", "hotel_klein" + iImg + ".jpg')");
    });
    $(".links").click(function() {
        if (iImg == 1) iImg = maxImg; else iImg--;
        $("#image").attr("src", "hotel_klein" + iImg + ".jpg')");
    });
});
</script>

Müsse doch an sich jetzt reibungslos funktionieren, richtig?
LG
 
Mir scheint, da ist noch ein Fehler bei den Anführungszeichen und den Klammern. So ist es richtig:
$("#image").attr("src", "hotel_klein" + iImg + ".jpg");
 
Zurück
Oben