Reagieren Sie auf Diashows - entfernen Sie Inline-Stile

6

Wie entfernt man die fest codierten Inline-Stile für Höhe und Breite aus der Diashow? Ich versuche, Ansichten Diashow reaktionsfähig zu machen.

Ich versuche, meine Diashow ansprechend zu gestalten (nein, ich bin momentan nicht an Flexslider oder einem anderen Diashow-Modul interessiert).

theming views Chrisjlee
quelle
Diesbezüglich gibt es einen sehr langwierigen Faden. drupal.org/node/1317510 Ehrlich gesagt ist es, als würde man einen quadratischen Stift in ein rundes Loch stecken . Flexslider ist wirklich die beste Lösung und kann alles, was Views Slideshow kann. Ich habe tatsächlich eine reguläre Views-Diashow erhalten, um mit Vorschlägen im obigen Thread zu reagieren, aber es war viel Arbeit und CSS-Hacking.
Danny Englander
Plus eins für Flex Slider. Sie wissen, dass der Flex Slider mit einem Views Slideshow Plugin geliefert wird, oder? Sie wählen einfach den Flex-Schieberegler anstelle des Zyklus. Ich ging von Zyklus v1 zu Zyklus v2 und dann zu Flex Slider über und musste nur eine sehr kleine Menge an CSS ändern, um den Wechsel vorzunehmen.
Rooby

Antworten:

9

Das oben erwähnte Flexslider-Modul scheint mit seiner Unterstützung für mobiles Wischen großartig zu sein, aber es werden nur Bilder unterstützt, und ich brauchte eine Video-Diashow mit Unterstützung für Overlays. Also habe ich die folgenden Zeilen in die CSS-Datei meines Themas eingefügt und es hat funktioniert:

.views_slideshow_cycle_main { width: 100%; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .field-content { max-width: 100%; width: 100%; }
.views_slideshow_cycle_main .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0; }

Mit SCSS kann es leicht geschrieben werden als: 

.views_slideshow_cycle_main {                                                      
  width: 100%;                                                                     
 .views-slideshow-cycle-main-frame {width: 100% !important; height: auto;}         
 .views-slideshow-cycle-main-frame-row {width: 100% !important; height: auto;}     
 .field-content { max-width: 100%; width: 100%;}                                   
 .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding:0;} 
}

Die Überlagerungen wurden von views_slideshow_xtra_overlay hinzugefügt.

Angepasst an diese Diskussion

Druvision
quelle
Ich verwende das Drupal-Modul Flex Slider v1 und habe sehr komplexe Inhalte in meiner Diashow. Es ist definitiv nicht auf Bilder beschränkt. - Oder meinst du, Swipe unterstützt nur Bilder?
Rooby
@Druvision Die Höhe ".views_slideshow_cycle_main .views-Slideshow-Cycle-Mainframe" scheint in meiner Ansichts-Slieshow nicht zu reagieren, wenn ich die Größe des Browsers ändere. Gibt es eine Möglichkeit, dies zu beheben?
CocoSkin
7

Besser ist es, die 'Erweiterten Optionen' des Ansichts-Diashow-Moduls selbst zu verwenden.

Sie müssen Folgendes tun

  1. Erstellen Sie ein Verzeichnis mit dem Namen json2 in sites / all / library, laden Sie https://raw.github.com/douglascrockford/JSON-js/master/json2.js herunter und benennen Sie den Ordner json2 um.

  2. Scrollen Sie unter FORMAT-Diashow-Einstellungen in der Ansicht durch "Benutzerdefinierte Optionen für jQuery Cycle" und unter "Erweiterte Optionen festlegen".

    height: auto
width: auto
containerResize: 0
slideResize: 0
fit: 1

  3. Passen Sie die Höhe des Schiebefensters an die größte Folie an: Lassen Sie das Kontrollkästchen deaktiviert

  4. Aktualisiere die Ansicht und voila! Die Diashow reagiert auch beim Ziehen des Browserfensters.

Ref: hier und hier

Kevin Siji
quelle
Je nachdem, was Sie in der Diashow haben, können immer noch Probleme auftreten. Nach meiner Erfahrung habe ich mit JQuery Cycle Version 1 keine 100% zuverlässige Methode gefunden. - Ich habe diese Einstellungen sogar mit etwas benutzerdefiniertem Javascript verwendet und trotzdem keine 100% perfekte Lösung erhalten.
Rooby
Ja, Flexslider HTML ist auch kurz und süß. +1 für Flexslider.
Kevin Siji
Hallo. Ich verstehe nicht, wie ich diesen Schritt ausführen kann: Passen Sie die Höhe des Folienfensters an die größte Folie an: Lassen Sie das Kontrollkästchen deaktiviert. Wo?
Cabita
@cabita In den Ansichten der Diashow mit Beschriftung befindet sich ein Kontrollkästchen Make the slide window height fit the largest slide. Lassen Sie es deaktiviert.
Kevin Siji
@KevinSiji Ist es möglich zu überprüfen, ob die Höhe des Folienfensters zur größten Folie passt, und die Diashow für Ansichten ansprechend zu gestalten.
Jetson John
3

Dieser Thread hat eine sehr schöne Lösung: https://drupal.org/node/1510526

Das empfohlene CSS bietet Ihnen eine sehr schöne Diashow, und es gibt auch Javascript, das Sie etwas weiter bringen können. Das einzige Problem, das ich habe, ist, dass, wenn Sie den Browser schmaler und breiter schieben, die Höhe der Diashow Probleme in vertikaler Richtung verursacht. Sie können dies mit unterschiedlichen CSS-Werten für die maximale Höhe für Ihre verschiedenen CSS-Dateien für Medienabfragen abmildern.

Jackrabbithanna
quelle