[jquery] Image SRC zum device anpassen

[Dustin84]

Hallo,

ich habe eine responsive Website und brauche bei meinen Slider Hilfe. Ich benutze carouFredSel
Die Bilder im Slider sollen sich , je nach device, austauschen.

Alles unter 768px bekommt das kleine Bild und alles darüber die große Desktop Variante.
Mir bereitet allerdings schon das Aufrufen der "Bilder austausch Funktion" Kopfschmerzen.

Wenn ich im Browser das Fenster verkleinere, feuert $(window).resize x-mal.

Es soll so sein:
Ist die Fensterbreite unter 768px, wird die "Bilder austausch Funktion" EINMAL ausgeführt.
Erst wenn die Fensterbreite jetzt wieder über 768px liegt, wird die "Bilder austausch Funktion" EINMAL ausgeführt.

Dazu habe ich schon folgendes:

$(window).one( "resize", function() {
    var width = $(window).width();
 
    if (width <=768){
    /* Funktion zum Austauschen des Bildes der MOBILE Variante*/
    }else {
    /* Funktion zum Austauschen des Bildes der DESKTOP Variante*/
    }
});

Jetzt wird die Funktion durch das .one() nur 1x ausgeführt.
Evtl. brauche ich auch einen neuen Denkansatz.... :-(

Gruß
D.

 

[Dustin84]

    $(window).smartresize(function(){
        if ($(window).width() >= 768){
            // Desktop
            $('.slide .img-slider').each(function() {
                $(this).attr('src', $(this).attr('src').replace("-xs", "-lg"));
            });
        }else{
            // Mobile
            $('.slide .img-slider').each(function() {
                $(this).attr('src', $(this).attr('src').replace("-lg", "-xs"));
            });
        }
    });

So, das sieht schon besser aus! Funktioniert alles. Also fast...
Wenn die Fensterbreite schon bei (sagen wir 1000px) ist, wurde das Bild schon in die Desktop Variante umgetauscht. Gut so! Aber: Wenn ich das Fenster noch weiter aufziehe, versucht er trotzdem noch, die IMG src auf die Desktop Variante zu setzen. Ist ja auch klar, da meine Abfrage diese ist:

$(window).width() >= 768

Wie sage ich, dass bereits die Desktop variante drin ist und das Script nichts mehr machen muss?

 

[ComFreek]

Speichere dir eine Variable, die den jeweils alten Zustand speichern. Diese kann z. B. die alte Fensterbreite sein oder eine Konstante "DESKTOP_SIZE" o. ä. Ich würde Letzteres bevorzugen.