Zur Navigation

wenn-Funktion bezüglich Fensterbreite [2]

... 3 Jahre und 8 Monate später ...

11 Isabell (Gast)

Hallo Jörg,

Ich habe einen slider mit unter anderen folgenden Skript:

jQuery(document).ready(function($) {
    $("#slider1").transitionSlider({
	initialSlide: 0,
	grabCursor: true,
	responsive: true,
	stopOnLastSlide: false,
	fullscreen: false,
	width: 1920,
	height: 800,
	slides: [
	    { src: "bilder/1.jpg", transitionEffect: "flash" },
	    { src: "bilder/2.jpg", transitionEffect: "warp", easing: "elastic", distance: "long" },
	    { src: "bilder/3.jpg", transitionEffect: "powerzoom", direction: "in", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/4.jpg", transitionEffect: "stretch", direction: "top", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/5.jpg", transitionEffect: "warpLongElastic" },
	    { src: "bilder/6.jpg", transitionEffect: "twirl" },
	    { src: "bilder/7.jpg", transitionEffect: "roll", direction: "top", distance: "short", transitionDuration: 700 },
            { src: "bilder/8.jpg", transitionEffect: "flash", brightness: 3, easing: "fast", transitionDuration: 300 },
	    { src: "bilder/9.jpg", transitionEffect: "powerzoom" }
	],
	autoplay: { delay: 2800 },
	navigation: { enable: false },
	keyboard: { enable: true },
	buttons: { enable: false },
	pagination: { enable: 1, style: 'effect3', clickable: 1, dynamicBullets: 0 },
	loading: { fadeEffect: true, backgroundColor: '#ffffff' },
	ratio: 2.4, // Verhältnis von Bildbreite zur Bildhöhe
	shadow: null
    });
});

Die Bilder dafür haben eine breite von 1920 und eine Höhe von 800 Pixel.
Um die Ladegeschwindigkeit die Seite zu erhöhen möchte ich auf einem Smartphone deutlich kleinere Bilder bereitstellen. Bilder mit einer Breite von 450 und einer Höhe von 675 Pixel.
Hatte gedacht, dass das mit dem von dir oben genannten aufgeführtem Code ganz einfach ist, doch da ich mich mit Java Skript überhaupt nicht auskenne, kann ich es selbst nicht lösen und brauche bitte deine Hilfe.
Probiert habe ich es zwar, doch es hat eben nicht geklappt.

Mein erstes Beispiel schaut so aus:

jQuery(document).ready(function($) {
    $("#slider1").transitionSlider({
if ($(window).width() < 451) {
	initialSlide: 0,
	grabCursor: true,
	responsive: true,
	stopOnLastSlide: false,
	fullscreen: false,
	width: 450,
	height: 675,
	slides: [
	    { src: "bilder/mobil/1.jpg", transitionEffect: "flash" },
	    { src: "bilder/mobil/2.jpg", transitionEffect: "warp", easing: "elastic", distance: "long" },
	    { src: "bilder/mobil/3.jpg", transitionEffect: "powerzoom", direction: "in", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/mobil/4.jpg", transitionEffect: "stretch", direction: "top", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/mobil/5.jpg", transitionEffect: "warpLongElastic" },
	    { src: "bilder/mobil/6.jpg", transitionEffect: "twirl" },
	    { src: "bilder/mobil/7.jpg", transitionEffect: "roll", direction: "top", distance: "short", transitionDuration: 700 },
            { src: "bilder/mobil/8.jpg", transitionEffect: "flash", brightness: 3, easing: "fast", transitionDuration: 300 },
	    { src: "bilder/mobil/9.jpg", transitionEffect: "powerzoom" },
	    { src: "bilder/mobil/10.jpg", transitionEffect: "stretch", easing: "slow", brightness: "flash"}
	],
	autoplay: { delay: 2800 },
	navigation: { enable: false },
	keyboard: { enable: true },
	buttons: { enable: false },
	pagination: { enable: 1, style: 'effect3', clickable: 1, dynamicBullets: 0 },
	loading: { fadeEffect: true, backgroundColor: '#ffffff' },
	ratio: 0.667, // Verhältnis von Bildbreite zur Bildhöhe
	shadow: null
}
else {
	initialSlide: 0,
	grabCursor: true,
	responsive: true,
	stopOnLastSlide: false,
	fullscreen: false,
	width: 1920,
	height: 800,
	slides: [
	    { src: "bilder/1.jpg", transitionEffect: "flash" },
	    { src: "bilder/2.jpg", transitionEffect: "warp", easing: "elastic", distance: "long" },
	    { src: "bilder/3.jpg", transitionEffect: "powerzoom", direction: "in", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/4.jpg", transitionEffect: "stretch", direction: "top", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/5.jpg", transitionEffect: "warpLongElastic" },
	    { src: "bilder/6.jpg", transitionEffect: "twirl" },
	    { src: "bilder/7.jpg", transitionEffect: "roll", direction: "top", distance: "short", transitionDuration: 700 },
            { src: "bilder/8.jpg", transitionEffect: "flash", brightness: 3, easing: "fast", transitionDuration: 300 },
	    { src: "bilder/9.jpg", transitionEffect: "powerzoom" },
	    { src: "bilder/10.jpg", transitionEffect: "stretch", easing: "slow", brightness: "flash"}
	],
	autoplay: { delay: 2800 },
	navigation: { enable: false },
	keyboard: { enable: true },
	buttons: { enable: false },
	pagination: { enable: 1, style: 'effect3', clickable: 1, dynamicBullets: 0 },
	loading: { fadeEffect: true, backgroundColor: '#ffffff' },
	ratio: 2.4, // Verhältnis von Bildbreite zur Bildhöhe
	shadow: null
}
    });
});

Hier erhalte ich folgende Fehlermeldung:
Uncaught SyntaxError: Unexpected token '('


Ein zweites Beispiel schaut so aus:
$(document).ready(function() {
    "use strict";
    if ($(window).width() < 451) {
jQuery(document).ready(function($) {
    $("#slider1").transitionSlider({
	initialSlide: 0,
	grabCursor: true,
	responsive: true,
	stopOnLastSlide: false,
	fullscreen: false,
	width: 450,
	height: 675,
	slides: [
	    { src: "bilder/mobil/1.jpg", transitionEffect: "flash" },
	    { src: "bilder/mobil/2.jpg", transitionEffect: "warp", easing: "elastic", distance: "long" },
	    { src: "bilder/mobil/3.jpg", transitionEffect: "powerzoom", direction: "in", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/mobil/4.jpg", transitionEffect: "stretch", direction: "top", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/mobil/5.jpg", transitionEffect: "warpLongElastic" },
	    { src: "bilder/mobil/6.jpg", transitionEffect: "twirl" },
	    { src: "bilder/mobil/7.jpg", transitionEffect: "roll", direction: "top", distance: "short", transitionDuration: 700 },
            { src: "bilder/mobil/8.jpg", transitionEffect: "flash", brightness: 3, easing: "fast", transitionDuration: 300 },
	    { src: "bilder/mobil/9.jpg", transitionEffect: "powerzoom" },
	    { src: "bilder/mobil/10.jpg", transitionEffect: "stretch", easing: "slow", brightness: "flash"}
	],
	autoplay: { delay: 2800 },
	navigation: { enable: false },
	keyboard: { enable: true },
	buttons: { enable: false },
	pagination: { enable: 1, style: 'effect3', clickable: 1, dynamicBullets: 0 },
	loading: { fadeEffect: true, backgroundColor: '#ffffff' },
	ratio: 0.667, // Verhältnis von Bildbreite zur Bildhöhe
	shadow: null
    });
});
    else {
jQuery(document).ready(function($) {
    $("#slider1").transitionSlider({
	initialSlide: 0,
	grabCursor: true,
	responsive: true,
	stopOnLastSlide: false,
	fullscreen: false,
	width: 1920,
	height: 800,
	slides: [
	    { src: "bilder/1.jpg", transitionEffect: "flash" },
	    { src: "bilder/2.jpg", transitionEffect: "warp", easing: "elastic", distance: "long" },
	    { src: "bilder/3.jpg", transitionEffect: "powerzoom", direction: "in", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/4.jpg", transitionEffect: "stretch", direction: "top", distance: "short", transitionDuration: 1700 },
	    { src: "bilder/5.jpg", transitionEffect: "warpLongElastic" },
	    { src: "bilder/6.jpg", transitionEffect: "twirl" },
	    { src: "bilder/7.jpg", transitionEffect: "roll", direction: "top", distance: "short", transitionDuration: 700 },
            { src: "bilder/8.jpg", transitionEffect: "flash", brightness: 3, easing: "fast", transitionDuration: 300 },
	    { src: "bilder/9.jpg", transitionEffect: "powerzoom" }
	],
	autoplay: { delay: 2800 },
	navigation: { enable: false },
	keyboard: { enable: true },
	buttons: { enable: false },
	pagination: { enable: 1, style: 'effect3', clickable: 1, dynamicBullets: 0 },
	loading: { fadeEffect: true, backgroundColor: '#ffffff' },
	ratio: 2.4, // Verhältnis von Bildbreite zur Bildhöhe
	shadow: null
    });
});
    }

Hier erhalte ich folgende Fehlermeldung:
Uncaught SyntaxError: Unexpected token 'else'



Würde mich freuen, wenn du mir helfen würdest.
Vielen Dank schon mal!

01.07.2020 14:30

12 Jörg Kruse

Ich würde zuerst Variablen definieren in Abhängigkeit von der Bildschirmbreite und dann innerhalb von transitionSlider() diese Variablen anstelle der festen Werte einsetzen:

jQuery(document).ready(function($) {
  if ($(window).width() < 451) {
    var sliderWidth = 450;
    var sliderHeight = 675;
    var sliderRatio = 0.67;
    var sliderDir = 'bilder/mobil/';
  } else {
    var sliderWidth = 1920;
    var sliderHeight = 800;
    var sliderRatio = 2.4;
    var sliderDir = 'bilder/';
  }
  $("#slider1").transitionSlider({
    initialSlide: 0,
    /* ... */
    width: sliderWidth,
    height: sliderHeight,
    slides: [
      { src: sliderDir + "1.jpg", transitionEffect: "flash" },
      /* ... */
      { src: sliderDir + "9.jpg", transitionEffect: "powerzoom" }
    ],
    /* ... */
    ratio: sliderRatio,
    shadow: null
  });
})

01.07.2020 14:59 | geändert: 01.07.2020 15:06

13 Isabell (Gast)

Hallo Jörg,

Vielen lieben Dank für deine clevere Lösung!
Funktioniert einwandfrei! Das freut mich sehr.
Dir noch einen schönen Tag!
Beste Grüße, Isabell

02.07.2020 13:57

14 Isabell (Gast)

Hallo Jörg,
im aller ersten Moment hatte ich gedacht, dass der Code für die Bilder folgendermaßen lauten müsste:
	    { src: "sliderDir+1.jpg", transitionEffect: "flash" },
Aber nur im ersten Moment.
So wie ich es vorhatte, ist es nicht nur umständlicher, sondern hätte auch gar nicht funktioniert, oder wie?

Wünsche dir ein schönes Wochenende
beste Grüße, Isabell

03.07.2020 16:11

15 Jörg Kruse

Das würde höchstens funktionieren, wenn der Name der Datei "sliderDir+1.jpg" lauten würde.

In JavaScript stehen Variablennamen nicht innerhalb von Anführungszeichen, ebensowenig Operatoren wie der Verkettungsoperator +. In Anführungszeichen werden nur fertige Textstrings gesetzt.

03.07.2020 16:38 | geändert: 03.07.2020 16:40

16 Isabell (Gast)

vielen Dank für deine Erklärung!
Wünsche dir noch einen schönen Tag

05.07.2020 15:05

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]