Neu Verschiedene Slider auf der Startseite abhängig von der Bildschirmauflösung. Geht das?

[surus]

Hallo an alle!

Gibt es die Möglichkeit einen anderen Slider auf der Startseite für Mobilgeräte anzuzeigen?
Die Shop-Seite ist responsive und sieht schön aus sowohl auf einem Desktop als auch auf einem Smartphone. Nur der Slider wird einfach runterskaliert, was auf einem Smartphone nicht so gut aussieht.
Gibt es die Möglichkeit verschiedene Slider für die Startseite anzulegen, einen für die Desktops und einen für die Smartphones?
Irgendwie finde ich diese Möglichkeit nicht und bitte deshalb um eure Hilfe!

 

[M.Stickel]

Hi surus,
das funktioniert mit dem Shop so (noch) nicht. Aktuell kann man nur einen Slider anlegen der auf der Startseite angezeigt wird. Mit Shop 5 wird es möglich sein mehrere Slider zu definieren und für bestimmte Gerätegrößen anzuzeigen.

 

[surus]

Wann kommt der neue 5-er Shop?

Und ist es mit viel Aufwand verbunden im aktuellen Shop diese Funktionalität zu ermöglichen?
Ich kann schon jetzt Slider mit verschiedenen Namen anzulegen. z.B. slider_normal_size und slider_mobil_size.
Man muss im Prinzip eine Prüfung der Auflösung einbauen und verschiedene Slider anzeigen: slider_normal_size oder slider_mobil_size. Oder ist es nicht so einfach?

 

[css-umsetzung]

Hi surus,
das funktioniert mit dem Shop so (noch) nicht. Aktuell kann man nur einen Slider anlegen der auf der Startseite angezeigt wird. Mit Shop 5 wird es möglich sein mehrere Slider zu definieren und für bestimmte Gerätegrößen anzuzeigen.

Dann werden die Slider aber nur mit hidden ausgeblendet was ja auch nicht zielführend wäre.

Wann kommt der neue 5-er Shop?

Und ist es mit viel Aufwand verbunden im aktuellen Shop diese Funktionalität zu ermöglichen?
Ich kann schon jetzt Slider mit verschiedenen Namen anzulegen. z.B. slider_normal_size und slider_mobil_size.
Man muss im Prinzip eine Prüfung der Auflösung einbauen und verschiedene Slider anzeigen: slider_normal_size oder slider_mobil_size. Oder ist es nicht so einfach?

Du solltest das mal online zeigen denn die Slider im Shop reagieren bereits auf verschiedene Bildschirmgrößen, so das je nach Aufruf mal mehr oder weniger Artikel in einer Reihe sind.

 

[surus]

Wir nutzen den Slider nur als Bild, keine Artikel werden dabei dargestellt. Und dieses Bild wird bei der Verkleinerung der Auflösung einfach runterskaliert. Irgendwann sieht es nicht mehr so schön aus und man sieht die kleinen Details nicht mehr. Ab einer Breite von ca. 600px wäre es sinnvoll ein anderes Bild zu benutzen, welches mehr Höhe hat und für diese Breite besser optimiert ist.

 

[<())><]

Wir nutzen dafür Dropper, dort kannst Du für die verschiedenen Ausgabegeräte angepasste Slider anzeigen lassen.

 

[css-umsetzung]

Ja aber dann würde ich lieber auf den Slider verzichten als nachher drei Slider zu haben die je nach Bildschirmgröße ausgeblendet werden.
Der Slider im 5er Shop hat auch keine Unterscheidung bei den Bildern du kannst eben nur die Slider selbst per hidden ausblenden.

 

[surus]

Den Dropper zu kaufen nur um den Slider anders zu gestalten ist vielleicht zu viel des Guten. Wenn es aber anders gar nicht geht, wäre es eventuell eine Option. 99 EUR einmalig für den Slider-Drop und jährlich 109 EUR für den Dropper wären zu verkraften.

Wir haben momentan einen Slider, der im Adminbereich in der Sliderverwaltung für die Startseite erstellt wurde.
Kann man dort einen weiteren Slider für die Startseite anlegen? Oder man kann nur einen Slider pro Seite erstellen?
Und wenn man zwei Slider für die Startseite anlegen kann, es ist dann bestimmt möglich über die Template zu regeln bei welcher Auflösung welcher Slider angezeigt wird?
Oder ist es nicht so einfach wie ich es mir vorstelle?

 

[FPrüfer]

Mit ein wenig JS und einer passenden Benennung der Bilder kann man das ggfs. mit mod_rewrite lösen. Zuerst muss an die src-URLs der Sliderbilder der Viewport angehängt werden.

(function($) {
    window.setTimeout(function() {
        $('.nivoSlider img').each(function (index, item) {
            $(item).attr('data-src', item.src);
            item.src += '?slider&viewport=' + $('body').attr('data-viewport');
        });
        $(window).on('resize', function () {
            window.setTimeout(function() {
                $('.nivoSlider img').each(function (index, item) {
                    item.src = $(item).attr('data-src') + '?slider&viewport=' + $('body').attr('data-viewport');
                });
            }, 300)
        });
    }, 300);
})(jQuery);

Dann kann man mit einer .htaccess im Verzeichnis /mediafiles/Bilder für eine Umschreibung der Bilder je nach Viewport sorgen:

<IfModule mod_rewrite.c>
    RewriteCond %{QUERY_STRING} ^slider&viewport=(md|sm|xs)
    RewriteRule ^([a-zA-Z]*)\.jpg $1_%1.jpg [L]
</IfModule>

Die Bilder für die einzelnen Viewports haben dann einen Namen der sich aus dem Ursprungsnamen + _ + viewport (z.B. SliderBild_xs.jpg) bildet.

 

[surus]

Danke!

Das werden wir ausprobieren.

 

[Inge]

Gute Idee @FPrüfer.
Funktioniert prima, vielen Dank dafür. Aber bitte den Viewport lg im Rewrite nicht vergessen 😉.

 

[FPrüfer]

Aber bitte den Viewport lg im Rewrite nicht vergessen 😉.

Das ist das Standardbild, welches nicht umgeschrieben wird. 😉

 

[lenovo]

Hallo zusammen,

JTL Shop 5 is ja jetzt schon eine Weile released und wird auch von uns genutzt, aber eine Option zum Erstellen verschiedener Slider, je nach Ausgabegerät, kann ich beim besten Willen nicht finden. Gibt es diese Funktion wirklich?

vG
Josh

 

[nmueller]

Hallo zusammen,

JTL Shop 5 is ja jetzt schon eine Weile released und wird auch von uns genutzt, aber eine Option zum Erstellen verschiedener Slider, je nach Ausgabegerät, kann ich beim besten Willen nicht finden. Gibt es diese Funktion wirklich?

vG
Josh

.. ich suche zwar gerade eine andere Lösung, aber falls du das noch benötigst:
Wenn du den Slider über den OnPage Composer anlegst kannst du auf der 3. Registerkarte "Layout" die verschiedenen Ausgabewege (S, M, L, XL) vom Bootstrap anwählen bzw. abwählen.
Wenn du dann für jeden gewünschten Breakpoint einen eigenen Slider anlegst und per "Layout"-Einstellung für den jeweiligen Ausgabeweg frei gibst, kannst du das jew. Endgerät ansteuern.