sek
Beiträge: 48
Registriert: 11. Sep 2008, 17:19
Wohnort: Görlitz

Höhe des Demo-Slider anpassen

15. Jan 2018, 14:17

Servus miteinander,

ich bin ein Redaxo- und CSS-Einsteiger und verzweifle gerade am Slider der Demo.
Die Demo-Seite von R5 ist cool und man kann sich vieles ansehen, was machbar ist.

Der Slider wird ja responsiv bei jedem Bildschirm 100% Höhe angezeigt, somit geht der Slider über die gesamte Seite.
Ich würde nun gern den Slider nur 60% der Gerätebildschirm-Höhe definieren.

Einzige Zeile die ich gefunden habe ist in redaxo-demo.css (607) aber das ist ja nur der Overlay, der darked

Code: Alles auswählen

.slides li .overlay {
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 2;
Desweiteen ist der Slider mit <section class="hero-slider slider-fullscreen> angegeben

Aber die Klasse slider-fullscreen ist irgendwie nirgends definiert.

Bin ich zu blind oder zu blöd?
Könnt ihr mir bitte weiterhelfen?
Danke.

Benutzeravatar
helpy
Beiträge: 63
Registriert: 27. Sep 2006, 09:59

Re: Höhe des Demo-Slider anpassen

15. Jan 2018, 16:08

Die Höhe des Sliders wird in einem JavaScript der aktuellen Fenstergröße angepasst.

Siehe JavaScript: resources/js/redaxo-demo.js
2017-08-06: started testing Redaxo 5.3

sek
Beiträge: 48
Registriert: 11. Sep 2008, 17:19
Wohnort: Görlitz

Re: Höhe des Demo-Slider anpassen

15. Jan 2018, 16:26

schon mal super hinweis. danke.
aber javascript, das ist ja noch komplizierter als css.

hier komm ich mit tipps und selber probieren überhaupt nicht weiter.

hier benötige ich bitte hilfe in form von "welche zeile ist womit umzuschreiben".

vielen lieben dank.

Benutzeravatar
anita
Beiträge: 700
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Re: Höhe des Demo-Slider anpassen

16. Jan 2018, 17:10

hi,

ich denke, das sind diese zeilen 65 - 68

Code: Alles auswählen

 // SlideHoehe fuer .slider-fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
       $(this).css('height', $(window).height());
    });
das müsstest Du entsprechend anpassen; versuch mal folgendes:

Code: Alles auswählen

$(this).css('height', ($(window).height() *  0.6));  // 60% 
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

sek
Beiträge: 48
Registriert: 11. Sep 2008, 17:19
Wohnort: Görlitz

Re: Höhe des Demo-Slider anpassen

16. Jan 2018, 18:24

Ach Schade, das wäre wohl auch zu einfach gewesen.

Nur die Zeile 67 zu ändern mit Deinem Vorschlag brachte leider gar nichts.

Dann viel mir auf, das in Zeile 102-108 auch nochmal so etwas steht. dort hab ich das auch eingefügt.

Nun wird zwar das Bild auf 60% Höhe verkleinert, aber den Slider haut es allgemein komplett auseinander, keine Steuerbuttons mehr da und auch alle 3 Slides werden gleichzeitig untereinander angezeigt. Mist.

Hm, also das das an dem window-höhe hängt ist doof. Besser wäre wohl, wenn man dem div 100% Höhe geben könnte und das script sich der gesamten Höhe des divs anpassen würde.

Gibt es $(div).height())?
Ne ist Quatsch wa?
Über das theoretische "könnte, müsste, sollte" komm ich hier aber nicht raus. Da fehlt es mir anh Kompetenzen. :(

Benutzeravatar
helpy
Beiträge: 63
Registriert: 27. Sep 2006, 09:59

Re: Höhe des Demo-Slider anpassen

17. Jan 2018, 09:59

Du könntest redaxo-demo.js wie folgt ändern

Code: Alles auswählen

jQuery(document).ready(function(){

  // heigth of slider (Fullscreen ==> 1.0)
  var mySliderHeight = 0.6;

...
  
    // SlideHoehe fuer .slider-fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
        $(this).css('height', $(window).height() * mySliderHeight );
    });

...

    // Die Slide-Hoehe fuer Fullscreen anpassen
    $('.slider-fullscreen .slides li').each(function () {
        $(this).css('height', $(window).height() * mySliderHeight );
    });
    $(window).resize(function () {
        $('.slider-fullscreen .slides li').each(function () {
            $(this).css('height', $(window).height() * mySliderHeight );
        });
    });

...
Das hat bei mir gut funktioniert.
Aber ich habe das nur im Firefox am PC getestet!

Dadurch sind die Texte über dem Bild halt etwas zu viel!
Wenn Du die Punkte (Navigation für die einzelnen Slide-Elemente) weiter nach unten schieben willst, dann müsstest Du das css von ".flex-control-nav" noch ändern oder überschreiben.

Ich habe auch keine Ahnung, ob durch die Höhen-Änderung evt. noch andere Seiteneffekte auftreten, wo das CSS nicht mehr passt.

Gruß,
Guido
2017-08-06: started testing Redaxo 5.3

sek
Beiträge: 48
Registriert: 11. Sep 2008, 17:19
Wohnort: Görlitz

Re: Höhe des Demo-Slider anpassen

17. Jan 2018, 14:50

Super spitzenklasse Guido, funktioniert perfekt.

Für den Text habe ich $(this).height() / 2 etwas angepasst und in der CSS die Schriftgrößen.
Getestet mit Chrom, Firefox, Edge und mit Safari auf ipad mini - funktioniert überall super, auch responsive.

Vielen lieben Dank.

Zurück zu „Allgemeines [R5]“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste